[09/05] Redux toolkit 적용

James An·2022년 9월 4일

42cabi

목록 보기

1/8

Redux

state를 관리하는 도구이며, store라는 저장소에서 component들의 state를 관리한다. 모든 component에서 reducer함수와 action을 통해 state에 접근 할 수 있다.

store

상태가 관리되는 곳, 규모가 크면 카테고리로 구분.

Action

Store에 대해 뭔가 하고 싶은 경우엔 Action을 발생시킨다.
Action의 발생을 감지하면, State가 갱신된다.

Reducer

이전 상태와 Action을 합쳐, 새로운 state를 만드는 조작

combineReducers

Reducer는 상황에 따라 여러 개를 가지게 될 텐데, 이를 한 군데에 모아 (= combine) 내보내주는 역할을 하기위해 사용

Redux Hook

usedispatch()

Redux 저장소에서 함수에 대한 참조를 반환한다. 필요에 따라 작업을 전달하는 데 사용한다.

useSelector()

상태값을 가져오기 위해 사용. useSelector에 매개변수에 state => state.모듈명 형식으로 상태값을 반환할 수 있다.

Redux가 필요한 경우

Redux는 다음과 같은 경우에 유용하다.

앱의 여러 위치에 필요한 많은 양의 애플리케이션 상태가 있는 경우
앱 상태가 자주 업데이트되는 경우
상태를 업데이트하는 논리가 복잡한 경우
앱에 중형 또는 대형 코드베이스가 있으며 많은 사람들이 작업하는 경우
시간이 지남에 따라 해당 상태가 어떻게 업데이트되는지 확인해야하는 경우

Redux-toolkit을 사용하는 이유

기존 Redux를 사용하는 패턴에는 duck 패턴을 주로 사용했다.

Redux-toolkit 적용 과정

/index.tsx

Provider, store

import { Provider } from "react-redux";
import store from "./redux/store";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

root 경로의 index.tsx에 provider에 reducer들이 등록된 store를 등록해준다.

src/redux/hook.ts

useAppSelector, useAppDispatch

import { useDispatch, useSelector } from "react-redux";
import type { TypedUseSelectorHook } from "react-redux";
import type { RootState, AppDispatch } from "./store";

export const useAppDispatch = (): any => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

redux의 상태에 접근하기 위한 useAppSelector와 상태를 업데이트할 useAppDispatch 설정

src/redux/store.ts

configureStore

import { configureStore } from "@reduxjs/toolkit";
import taskBanUserSlice from "./slices/taskBanUserSlice";

const store = configureStore({
  reducer: {
    // reducerName: reducer
    taskBanUser: taskBanUserSlice,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export default store;

reducer들을 저장하는 store 설정.

src/redux/slices

createSlice

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { TaskBanUserData } from "../../type";

// Define the initial state using that type
const initialState: TaskBanUserData = [];

export const taskBanUserSlice = createSlice({
  name: "taskBanUser",
  // `createSlice` will infer the state type from the `initialState` argument
  initialState,
  reducers: {
    // Use the PayloadAction type to declare the contents of `action.payload`
    GetBanUserResponse: (state, action: PayloadAction<TaskBanUserData>) => {
      return action.payload;
    },
    taskBanUserInitialize: (state) => {
      return initialState;
    },
  },
});

export const { GetBanUserResponse, taskBanUserInitialize } =
  taskBanUserSlice.actions;
export default taskBanUserSlice.reducer;