Mern Social Network الجزء الخامس
فهاد الجزء الخامس من MERN social network غادي نكملوا الجزء الخاص ب redux من بعد مازدنا types و actions غادي ندوزوا ل reducers وفالأخير غادي نربطوا ل app ديالنا مع store لي سبق وزدنا فالجزء السابق.
نظرة سريعة بالفيديو
1- إضافة ل user reducer
دائما ف dossier redux زيد dossier جديد سميه reducers فيه غادي تزيد dossier user فهاد dossier user زيد fichier سميه userReducer.js لي غادي يكون فيه هاد الكود :
import userTypes from "../../types/userTypes";
const initialState = {
currentUser: null,
users: [],
userError: null,
userSuccess: false,
};
const userReducer = (state = initialState, action) => {
switch (action.type) {
case userTypes.GET_USERS:
return {
...state,
users: action.payload,
};
case userTypes.AUTH:
return {
...state,
currentUser: action.payload,
userError: null,
userSuccess: !state.userSuccess,
};
case userTypes.CHECK_AUTH:
return {
...state,
currentUser: action.payload,
};
case userTypes.SIGNOUT:
return {
...state,
user: action.payload,
};
case userTypes.REGISTER:
return {
...state,
userError: null,
userSuccess: !state.userSuccess,
};
case userTypes.UPDATE:
const jwt = JSON.parse(localStorage.getItem("jwt"));
const newJwt = { ...jwt, user: action.payload };
localStorage.setItem("jwt", JSON.stringify(newJwt));
return {
...state,
currentUser: { ...state.currentUser, user: action.payload },
userSuccess: !state.userSuccess,
};
case userTypes.DELETE:
const updatedUsers = state.users.filter(
(user) => user._id !== action.payload.userId
);
return {
...state,
users: updatedUsers,
currentUser: null,
userSuccess: !state.userSuccess,
};
case userTypes.FOLLOW:
return {
state,
};
case userTypes.UNFOLLOW:
return {
state,
};
case "USER_ERROR":
return {
...state,
userError: action.payload,
};
case "HIDE_USER_ERROR":
return {
...state,
userError: null,
};
case "TOGGLE_SUCCESS":
return {
...state,
userSuccess: !state.userSuccess,
};
default:
return state;
}
};
export default userReducer;
2- إضافة ل post reducer
دائما ف dossier reducers زيد dossier post فهاد dossier post زيد fichier سميه postReducer.js لي غادي يكون فيه هاد الكود :
import postTypes from "../../types/postTypes";
import { isLogged } from "../../../helpers/auth";
const intialState = {
posts: [],
userPosts: [],
};
const postReducer = (state = intialState, action) => {
switch (action.type) {
case postTypes.GET_ALL:
return {
...state,
posts: action.payload,
};
case postTypes.USER_POSTS:
return {
...state,
userPosts: action.payload,
};
case postTypes.ADD_POST:
return {
...state,
posts: [action.payload, ...state.posts],
};
case postTypes.REMOVE_POST:
const updatedPosts = state.posts.filter(
(post) => post._id !== action.payload._id
);
const updatedUserPosts = state.userPosts.filter((post) => {
if (post.postedBy._id === action.userId) {
return post._id !== action.payload._id;
}
});
return {
...state,
posts: updatedPosts,
userPosts: updatedUserPosts,
};
case postTypes.LIKE_UNLIKE_POST:
const newUpdatedPosts = state.posts.filter((post) => {
if (post._id === action.payload._id) {
post.likes = action.payload.likes;
return state.posts;
}
return state.posts;
});
const newUserUpdatedPosts = state.userPosts.filter((post) => {
post.likes = action.payload.likes;
return state.userPosts;
});
return {
...state,
posts: newUpdatedPosts,
userPosts: newUserUpdatedPosts,
};
case postTypes.ADD_DELETE_COMMENT:
const afterCommentActionUpdatedPosts = state.posts.filter((post) => {
if (post._id === action.payload._id) {
post.comments = action.payload.comments;
return state.posts;
}
return state.posts;
});
const afterCommentActionUserUpdatedPosts = state.userPosts.filter(
(post) => {
post.comments = action.payload.comments;
return state.userPosts;
}
);
return {
...state,
posts: afterCommentActionUpdatedPosts,
userPosts: afterCommentActionUserUpdatedPosts,
};
default:
return state;
}
};
export default postReducer;
3- إضافة root reducer
دائما ف dossier redux زيد fichier جديد سميه rootReducer.js لي كيجمع كاع reducers لي زدنا ولي غادي يكون فيه هاد الكود :
import { combineReducers } from "redux";
import userReducer from "./user/userReducer";
import postReducer from "./post/postReducer";
const rootReducer = combineReducers({
user: userReducer,
post: postReducer,
});
export default rootReducer;
4- ربط ل App ديالنا ب store لي زدنا
باش نربط ل app ديالي ب store لي سبق وزدنا غادي نمشيو ل index.js وغادي نزيدو تعديلات لي غادي تمكن من ربط ل app ديالنا ب store.
الكود ديال الملف بعد التعديل :
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import store from "./redux/store";
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById("root")
);