Redux-toolkit 컨셉

redux 그 자체는 좋지만, 이를 위해 긴 코드를 작성하는 것은 여간 귀찮은 일이 아니다.
그래서 나온 redux-toolkit은 코드의 길이를 간단하게 줄여준다.

---

기본 환경설정

npm i redux @reduxjs/toolkit

둘 다 기본적으로 ts를 지원함!

---

module 생성

module에는 action type, action function, reducer 등 작성할 것이 많다.
redux-toolkit은 slice라는 기능을 제공한다.

import { createSlice } from 'redux-toolkit';

interface CounterState {
  count: number;
}

const initialState: CounterState = {
	count: 0,
};

const counterSlice = createSlice({
	name: 'counter',
	initialState: initialState,
	reducers: {},
});

slice의 이름과 initialState를 작성한다.
해당 state를 관리하는 reducer는 아래에서 작성하도록 하겠다.

---

reducer

import { createSlice } from '@reduxjs/toolkit/dist/createSlice';
import { PayloadAction } from '@reduxjs/toolkit/dist/createAction';

interface CounterState {
  count: number;
}

const initialState: CounterState = {
  count: 0,
};

const counterReducer = createSlice({
  name: 'counterSlice',
  initialState,
  reducers: {
    up: (state) => {
      state.count += 1;
    },
    down: (state) => {
      state.count -= 1;
    },
    upBy: (state, action: PayloadAction<{ unit: number }>) => {
      const payload = { action };
      console.log(payload);
    },
    reset: (state) => {
      state.count = 0;
    },
  },
});

export default counterReducer.reducer;
export const { up, down, upBy, reset } = counterReducer.actions;
// slice는 reducer과 action함수를 동시에 생성한다. actions 필드를 선언하지 않았음에도 불구하고 export가 가능하다.

마지막 export 부분을 조금 더 챙겨보자.

export default

rootReducer에 DI 해줄 reducer들의 뭉치이다.
store를 생성할 때, configureStore 내부의 reducer field에 DI해주면 된다.

export

redux에서 사용하던 액션함수들이다.
분명 counterSlice의 매개변수로 넘겨준 객체엔, actions 필드가 존재하지 않는다.
하지만, 이러한 action함수가 필요할 것을 당연히 알고있는 toolkit은 reducer에서 선언한 메서드들과 동일한 이름으로 action 함수를 생성해준다.
개별로 export하여 필요한 곳에서 import하여 사용한다.

---

store 생성

redux-toolkit에선 더 이상 createStore를 사용하지 않는다.
대신 configureStore를 사용한다.

store에 rootReducer를 DI 해주는 방식도 조금 다르다.

// ./redux/module/index.ts
import { configureStore } from "reduxjs/toolkit";
import countReducer from './counter'; //module에서 export default한 counterSlice.reducer

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

export default store;

Provider DI

생성한 store를 동일하게 DI한다.

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

root.render(
  <React.StrictMode>
    <Provider store={store}>
	  <App />
    </Provider>
  </React.StrictMode>
);