모듈 생성하기
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에 추가하기
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>
)