5. Redux-ToolKit [ Slice 분할하기 ]

Slice 수십, 수백개라면, 한 파일에 있을 경우 감당이 되지 않을것이다. 분할하자.

 

우선 기존의 Store 를 보자

< store/index.js>

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

const initialCounterState = { counter: 0, showCounter: true };
const initialAuthState = { Authentication: false };

const counterSlice = createSlice({
    name: "counter",
    initialState: initialCounterState,
    reducers: {
        increment(state) {
            state.counter++;
        },
        decrement(state) {
            state.counter--;
        },
        userinput(state, action) {
            state.counter = state.counter + action.payload;
        },
        toggleCounter(state) {
            state.showCounter = !state.showCounter;
        },
    },
});

const authSlice = createSlice({
    name: "auth",
    initialState: initialAuthState,
    reducers: {
        login(state) {
            state.Authentication = true;
        },
        logout(state) {
            state.Authentication = false;
        },
    },
});

const store = configureStore({
    reducer: { counter: counterSlice.reducer, auth: authSlice.reducer }
)}

export const counterAction = counterSlice.actions;

export const authAction = authSlice.actions;      

export default store;

 

 

두개 밖에 없는데도 길다! 분할해보자

< store / counter.js >

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

    const initialCounterState = { counter: 0, showCounter: true };	// 분할

    const counterSlice = createSlice({		// 분할
      name: "counter",
      initialState: initialCounterState,
      reducers: {
        increment(state) {
          state.counter++;
        },
        decrement(state) {
          state.counter--;
        },
        userinput(state, action) {
          state.counter = state.counter + action.payload;
        },
        toggleCounter(state) {
          state.showCounter = !state.showCounter;
        },
      },
    });

    export const counterAction = counterSlice.actions;	// Action 도 따로 분할

    export default counterSlice.reducer;  // default 로, reducer 를 내보낸다


< store / auth.js >

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

    const initialAuthState = { Authentication: false };     // 분할

    const authSlice = createSlice({                         // 분할
        name: "auth",
        initialState: initialAuthState,
        reducers: {
            login(state) {
                state.Authentication = true;
            },
            logout(state) {
                state.Authentication = false;
            },
        },
    });

    export const authAction = authSlice.actions;        // Action 도 여기서 따로 분할

    export default authSlice.reducer;                   // default 로, reducer 를 내보낸다


< store / index.js >

	import { configureStore } from "@reduxjs/toolkit";
  
    import counterReducer from "./counter";		// counterReducer import
    import authReducer  from "./auth";			// authReducer import 
    
    const store = configureStore({
    	reducer : {counter: counterReducer, auth: authReducer}
    )}
    
    export default store;

 

사용하는데 차이점은 단 하나!

 

Action을 index 가 아니고, Action 이 각각의 존재하는 파일에서 import  

import classes from "./Header.module.css";
import { useDispatch, useSelector } from "react-redux"; 
import { authAction } from "../store/auth"; 		// index 가 아니고, Action 을 각각의 Slice 가 있는 파일에서 import

const Header = () => {
  const authState = useSelector((state) => state.auth.Authentication);
  
  	...