Redux Toolkit에 대한 정리

일반 리덕스 예시 코드

//Action creator


const ADD_NUMBER = "ADD_NUMBER";
const MINUS_NUMBER = "MINUS_NUMBER";

export const addNumber = (payload) => {
	return {
    	type:ADD_NUMBER,
        payload,
    };
};

export const minusNumber = (payload) =>{
	return {
    	type:MINUS_NUMBER,
        payload,
    };
};

//Initial State
const initialState = {  
	number = 0;
};

//Reducer
const counter = (state = initialState,action) => {
	switch(action.type){
    	case ADD_NUMBER:
        	return {
             number:state.number + action.payload,
            };
        case MINUS_NUMBER :
        	return {
            	number: state.number - action.payload,
            };
            default:
            return state;
    }
};

export default counter;

코드를 자세히 살펴보면 Action value와 Action creator를 직접 생성해주지 않고 Action value, Action creator,Reducer가 하나로 합쳐짐

//src/redux/modules/counterSlice.js

import {createSlice] from "@reduxljs/toolkit";

const initialState = {
	number : 0,
};

const counterSlice = createSlice({
	name: "counter",  // 모듈의 이름
    initialState,		// 위 모듈의 초기 상태 값
    // 리듀서 안에서 만든 함수 자체가 리듀서의 로직이자,액션 크리에이터가 된다.
    reducers: { // 이 모듈의 초기상태 로직 
    	addNumber : (state,action) => {
        	state.number = state.number + action.payload;
        },
       minusNumber: (state,aciton) =>{
       		state.number = state.number - action.payload;
       },
    }
})
		// 액션 크리에이터는 컴포넌트에서 사용하기 위해 export
export const {addNumber, minusNumber} = createSlice.actions;
// reducer 는 configStore에 등록하기 위해 export default 한다.
export default counterSlice.reducer;

counterSlice 리듀서 안에서 만들어주는 함수가 리듀서의 로직이 되면서도 동시에 Action Creator가 된다는 점이다. 그리고 Action value까지 함수의 이름을 따서 자동으로 만들어 진다. 그래서 우리는 Reducer만 만들어주면 된다.

// 액션 크리에이터는 컴포넌트에서 사용하기 위해 인수분해할당하여 export하고
export {addNumber, minusNumber} = counterSlice.actions;
// reducer는 configStore에 등록하기 위해 export default 한다.
export default counterSlice.reducer;