1. Redux-toolkit이란?

• 리덕스팀에서 리덕스에서 자주 쓰는 기능을 모아 공식적으로 만든 라이브러리이다.

2. 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/index.js 수정

   • userReducer -> userSlice
   • user : userSlice.reducer로 수정
   • slice란 초기state, reducer, action을 합친 개념. 보통 action은 특정 reducer안에 종속되어 있어 나누지않고 하나로 합쳐 slice를 만듦

4. reducers/user.js 수정

   • createSlice import
   • createSlice로 userSlice만들기
     • const userSlice = createSlice({})
     • 리듀서 이름 설정
       • action이름을 넣는 이유는 이름이 추후에 user/login/Pending로 자동 네이밍에 사용되기 위해서이다.
   • initialState,
   • userReducer,

     • reducers는 immer가 적용되어 있다.

     • action에 들어있는 데이터는 action.data가 아니라 action payload다

     • userReducer에는 동기, 내부 action이 주로 등장한다.

       reducers: { logOut(state, action) { state.data = null;
       }},
       

5. action/user.js 수정

   • slice를 만들면 toolkit이 알아서 action을 만들어준다. 따라서 action의 코드는 삭제해준다.

6. App.js 수정

   • userSlice가져오기 const userSlice = require("./reducers/user");
   • userSlice.action에서 toolkit이 만든 logout 가져오기

   const onLogout = useCallback(() => { dispatch(userSlice.actions.logOut()); }, []);