redux module 세팅하기

모듈 생성하기

redux/modules/post.js

import

import {createAction, handleActions} from 'redux-actions';

// 불변성 유지
import {produce} from 'immer';

action

// 리덕스에 목록 넣어주는 역할
const SET_POST = 'SET_POST';

// 리덕스에 목록 추가해주는 역할
const ADD_POST = 'ADD_POST';

action creators

const setPost = createAction(SET_POST, (post_list) => ({post_list}));
const addPost = createAction(ADD_POST, (post) => ({post}))

초기값 세팅

// reducer가 사용할 intialState
const initialState = {
    list: [],
}

// 게시글 하나에 대한 기본값 
const initialPost = {
    id:0,
    // Post.defaultProps 값 가져오기
    user_info: {
        user_name: " hyo",
        user_profile:
          "https://images.mypetlife.co.kr/content/uploads/2019/09/09153001/dog-panting-1024x683.jpg ",
      },
      image_url:
        "https://images.mypetlife.co.kr/content/uploads/2019/09/09153001/dog-panting-1024x683.jpg",
      contents: "귀여워",
      comment_cnt: 10,
      insert_dt: "2021-09-30 12:00:00",
}

reducer

export default handleActions(
    // immer 사용해서 불변성 유지
    {                          // 어떤 처리를 해줄 것인지 (immer 사용)
        [SET_POST] : (state, action) => produce(state, (draft) =>{ }),

        [ADD_POST] : (state, action) => produce(state, (draft) =>{ })
    }, initialState
)

export

const actionCreators = {
    setPost,
    addPost,
    getPostFB
}

export {actionCreators}

rootreducer에 추가하기

configureStore.js

import

import Post from './modules/post';

rootreducer

const rootReducer = combineReducers({
  user: User,
  post: Post, 

  router: connectRouter(history),
});

게시글과 연동

PostList.js

import

import { useSelector , useDispatch} from 'react-redux';

// Post import
import Post from '../components/Post'



const PostList = (props) => {
    const dispatch = useDispatch();
    const post_list = useSelector((state) => state.post.list);
    }

게시글 가져오기

return (
       <React.Fragment>
           {/* 포스트 갯수만큼 가져오기 */}
           {post_list.map((p, idx) =>{
                      // 게시글에 대한 모든 정보가 들어감
               return <Post key={p.id} {...p} />
           })}
       </React.Fragment>
   )