1. Redux와 Redux-toolkit 비교

1. store.js 수정

   • configureStore import
   • 보통 리듀서 & 미들웨어만 연결
   • (선택) SSR할 때만 initialState
   • (선택) 미들웨어 연결 middleware : [firstMiddleware]
   • (선택) devtools 연결 devTools: process.env.NODE_ENV !== "production",

2. reducers/index.js

   • 수정 사항 없음.

3. reducers/postSlice.js 수정

   • 로그인과 같이 user의 외부와 통신하는 비동기 action은 extraReducers에 적어준다.
   • 비동기 요청은 항상 3개가 세트이다. pending, fulfilled, rejected는 정해진 워딩이다.

   extraReducers: {
       [logIn.pending](state, action) {
           state.isLoggingIn = true;
       },
       [logIn.fullfilled](state, action) {
           state.data = action.payload;
           state.isLoggingIn = false;
       },
       [logIn.rejected](state, action) {
           state.data = null;
           state.isLoggingIn = false;
       },
   },
   

   • 참고) action.data가 아니라 항상 action.payload라고 적어주어야 한다.
   • 참고) 불변성이 깨지면 return state를 적어줘야 한다.

4. reducers/user.js 수정

   • createSlice import

5. action/user.js 수정

   • 동기는 action을 따로 만들 필요가 없기에 action은 비동기의 공간이다.

   • createAsyncThunk import

   • 액션 정의하기

     • 액션이름, async(호출할 때 받는 데이터, thunkAPI);

   • login thunk action만들기

     • async이기 때문에 리턴해줘야 하며, 리턴한 data는 success의 데이터로 들어간다.

     const logIn = createAsyncThunk(
     "user/login", async (
     	data, thunkAPI) => { 
     		console.log(data); 
     		const result = await delay(500, { userId: 1, nickname: "taehee", }); 
     		return result; 
     });
     

6. App.js 수정

   • dispatch(logIn())으로 CRUD한다.