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")
);
                                        
                                    

كلمات مفاتيح :