TIL. 리덕스 툴킷 사용하기

기존에는 createStore를 이용하여 리덕스를 사용하였는데

We recommend using the configureStore method of the @reduxjs/toolkit package, which replaces createStore.

이런 창이 떠서 툴킷 사용을 권장하여 툴킷을 사용해보기로 하였다.

우선 툴깃을 사용할 때는

첫번째

npm i redux react-redux @reduxjs/toolkit package

을 통해 설치 해주어야 한다.

두번째로는 슬라이스를 생성해주어야 한다.

const uiSlice = createSlice({
  name: "ui",
  initialState: {
    cartIsVisible: false,
  },
  reducers: {
    toggle(state) {
      state.cartIsVisible = !state.cartIsVisible;
    },
  },
});
export const uiActions = uiSlice.actions;
export default uiSlice;

세번째로는 스토어를 생성해주어야 한다.

const store = configureStore({
  reducer: { ui: uiSlice.reducer, cart: cartSlice.reducer },
});
export default store;

네번째로는 index파일에서 리덕스를 사용할 부분을 프로바이더로 감싸준다.

  <Provider store={store}>
    <App />
  </Provider>

여기까지 하면 리덕스를 통해 상태를 관리할 준비가 끝난다.

리덕스를 통해 상태를 업데이트하기 그리고 상태 조회하기

useSelector를 통해 상태를 조회하고 useDispatch를 통해 생성한 action을 실행할 수 있다.

  const dispatch = useDispatch();
  const cartQuantity = useSelector((state) => state.cart.totalQuantity);
  const toggleCartHandler = () => {
    dispatch(uiActions.toggle());
  };
  <button className={classes.button} onClick={toggleCartHandler}>
 <span>My Cart</span>
 <span className={classes.badge}>{cartQuantity}</span></button>