TIL35-01 Redux Toolkit

Redux Toolkit(Feat. Flux Pattern)

• 리덕스 툴킷은 우리가 이전에 배운 리덕스를 개량한 것이다.
• 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고, 리덕스 팀에서는 이것을 수용하여 **코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷이다. 줄여서 RTK 라고도 한다.

리덕스 툴킷 설치하기

yarn add react-redux @reduxjs/toolkit

리덕스 툴킷 사용하기

1. config.js

• configureStore()를 활용한다.

import { configureStore } from '@reduxjs/toolkit';

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

export default sotre;

2. moudules

• counter.js를 예시로 했다.
• createSlice()를 활용한다.
• 기존 리덕스에서 aciton value, action creator, reduce가 합쳐진 모습의 코드다.

import { createSlice } from '@reduxjs/toolkit'  

const initialState = {
    number: 0,
};

const counterSlice = createSlice({
    name: 'counter',
    initialState,
    reducers: {
        addNumber: (state, action) => {
            state.number = state.number + 1;
        },
        minusNumber: (state, action) => {
            state.number = state.number - 1;
        },
    },
});
export default counterSlice.reducer;
export const { addNumber, minusNumber } = counterSlice.actions;

• 기존과 달리 reducer를 통해 반환되는 값들에 불변성을 유지 하지 않아도 된다.

리덕스 devtools

• 다른 패키지에서는 찾아볼 수 없는 굉장히 강력한 개발툴이다. 현재 프로젝트의 state 상태라던가, 어떤 액션이 일어났을 때 그 액션이 무엇이고, 그것으로 인해 state가 어떻게 변경되었는지 등 리덕스를 사용하여 개발할 때 아주 편리하게 사용할 수 있다.