RTK 액션 fulfilled시 state 업데이트하기

chaaerim·2022년 7월 16일
0
// initialState에서 나눈대로 데이터 패칭하기... 꼭 ....
export const curationPostSlice = createSlice({
  name: 'curation',
  initialState,
	export const curationPostSlice = createSlice({
        state.pending = true;
      })
      .addCase(getCurationPostListsThunk.fulfilled, (state, action) => {
        state.message = action.payload.message;
        state.data = action.payload.data;
        state.pending = action.payload.pending;
        state.pending = false;
        // console.log(state);
        // console.log(state.data.results);
      })
      .addCase(getCurationPostListsThunk.rejected, (state, action) => {
        state.pending = false;
        console.error(action.error);
      });
  },
});

발생 에러

curationPostSlice 내부에서 콘솔을 찍으면 fulfilled시 action.payload로 업데이트된 state가 보이는데 컴포넌트에서는 아무리 콘솔을 찍어도 state가 빈 값으로 나옴.


해결책

action.payload를 fulfilled 액션에 담아 디스패치할 때 데이터를 initialState에서 구조를 짠 대로 넣어주어야 컴포넌트에서 useAppSelector 이용할 때 컴포넌트에서 문제없이 읽어온다.

참고한 자료

0개의 댓글