[리액트] Redux ToolKit 적용하기

• 기존의 리덕스를 사용한 소스코드를 Redux ToolKit을 적용한 형태로 변경해보자.

설치

해당 프로젝트 폴더에서 yarn add 명령어를 통해 툴킷 패키지를 설치한다.

yarn add @reduxjs/toolkit

 

Redux 소스코드 수정하기

src/redux/config/configStore.js

import { configureStore } from "@reduxjs/toolkit"
import counter from "../modules/counter";

const store = configureStore({
    reducer : {
        counter : counter,
    }
})

export default store

 

스토어 소스코드 수정

• Toolkit을 사용하면 스토어, 루트리두스를 한번에 설정할 수 있다.

 

src/redux/modules/counter.js

import { createSlice } from "@reduxjs/toolkit"
/* 2-초기상태 설정 */
const initState = {
    number : 0
}

/**
 * 1.ToolKit의 createSlice({객체}) API를 통해
 * 액션생성함수, 초기값, 리듀서를 한번에 만들 수 있다
 * createSlice가 리턴하는 값을 담은 변수에서 
 * .reducer로 접근하면 리듀서를 가져올 수 있고
 * .actions를 하면 액션생성함수에 접근 가능하다.
 * 
 * reducers는 여러 리듀서를 가질 수 있기 때문에 객체를 받는다.
 * reducers에 포함되어있는 객체의 키명과 동일하게 액션이 생성된다!!
 */
const counterSlice = createSlice({
    name : 'counter',
    initialState : initState,
    reducers : {
        increaseNumber : (state, action)=>{
            state.number = state.number+1
        },
        decreaseNumber : (state, action)=>{
            state.number = state.number-1
        }

    }
})

export const {increaseNumber, decreaseNumber} = counterSlice.actions
export default counterSlice.reducer

 

모듈 소스코드 수정

• 기존의 리듀서에서 액션타입을 정의하고 그 액션타입으로 액션생성함수를 정의, 초기값, 리듀서를 하나하나 정의하던것을 한번에 할 수있다.
• 초기값은 기존의 객체로 선언해둔 것을 그대로 사용하겠다.
• 구조분해할당을 통해서 각각 선언된 이름대로 할당을 해준뒤 export 해주겠다.

 

src/components/Counter.jsx

import React from 'react';

/**툴킷. 으로 만든 액션생성함수를 가져온다. */
import { increaseNumber, decreaseNumber } from '../redux/modules/counter';
function Counter() {
    /* 7-useSelecter 를 통해 스토어의 값을 가져온다*/
    const count = useSelector(state=>state.counter)
    
    /* 8-useDisfatch를 사용해서 스토어의 값을 사용할수 있게 준비한다. */
    const dispatcher = useDispatch()

    /* 10-dispathcer를 통해 리덕스 모듈에 있는 액션생서함수에 접근한다. */
    const onClickEventHandler = (e) => {
        if(e.target.id === 'increase'){
            console.log("증가버튼")
            dispatcher(increaseNumber())
        }else{
            console.log("감소버튼")
            dispatcher(decreaseNumber())
        }
    }

    return (
        <div>
            <div>{count.number}</div>

            <button id="increase" onClick={onClickEventHandler}>증가</button>
            <button id="decrease" onClick={onClickEventHandler}>감소</button>
        </div>
    )
}

export default Counter;

 

컴포넌트 소스코드 수정