리액트 RTK 다중 슬라이스 사용법

리덕스 툴킷을 사용할때, 슬라이스가 여러개가 되어서 상태관리가 복잡해지면 파일을 분할해서 관리하는 것이 좋다.

1. 관리할 state를 createSlice로 나누어주기 (여기서는 Slice와 Slice.actions만 export)

-ui-slice.js

import { createSlice } from "@reduxjs/toolkit";


const uiSlice = createSlice({
    name : 'ui',
    initialState : {cartIsVisible : false},
    reducers : {
        toggle (state){
            state.cartIsVisible = !state.cartIsVisible
        }
    }
});


export const uiActions = uiSlice.actions;

export default uiSlice;

-cart-slice.js

import { createSlice } from "@reduxjs/toolkit";

const cartSlice = createSlice({
  name: "cart",
  initialState: {
    items: [],
    totalQuantity: 0,
  },
  reducers: {
    addItemToCart(state, action) {
      // 새로운 추가된 아이템
      const newItem = action.payload;

      //새로 추가된 아이템이 기존 장바구니에 존재하는가 ?
      const existingItem = state.items.find((item) => item.id === newItem.id);

      // 만약 기존 장바구니에 존재하지 않는다면

      if (!existingItem) {
        state.items.push({
          itemId: newItem.id,
          price: newItem.price,
          quantity: 1,
          totalPrice: newItem.price,
          name: newItem.title,
        });
      }
      // 만약 기존 장바구니에 존재한다면
      else {
        existingItem.quantity++;
        existingItem.totalPrice = existingItem.totalPrice + newItem.price;
      }
    },
    removeItemFromCart(state, action) {
        const id = action.payload;
        
        const existingItem = state.items.find(item => item.id === id);

        if(existingItem.quantity === 1){
          state.items = state.items.filter(item => item.id !== id );
        } else{
            existingItem.quantity--;
        }
    },
  },
});


export default cartSlice;
export const cartActions = cartSlice.actions;

2. store폴더에서 configureStore 할 js파일을 따로 만들어줘서 export해주기

import { configureStore } from "@reduxjs/toolkit";
import uiSlice from "./ui-slice"
import cartSlice from "./cart-slice";


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

export default store;

3. index.js 에서 Provider와 store 불러와서 감싸주기

import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './store/index';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Provider store={store}><App /></Provider>);