Redux Toolkit

- Redux Toolkit

Redux 표준 방식으로 만들어졌으며, 아래와 같이 세 가지 문제를 해결하기 위해 만들어졌다.

  1) 기존 Redux Store 구성이 너무 복잡하다.

  2) Redux에서 유용한 작업을 수행하려면 많은 패키지를 추가해야 한다.

  3) Redux에는 너무 많은 상용구 코드가 필요하다.

 

- 주요 API

 1. configureStore() : Store를 구성하는 API로 Slice Reducer를 자동으로 결합하고, 제공하는 모든 Redux MiddleWare, redux-thunk, Redux DevTools Extension을 사용할 수 있다.

 

 2. createSlice() : Reducer 함수의 객체, Slice 이름, 초기 상태 값을 받아들이고 해당 Action 생성자와 Action 유형으로 Slice Reducer를 자동으로 생성한다. createAction + createReducer 느낌이다.

 

 3. createAsyncThunk() : 비동기 Action 처리를 위한 함수로 pending / fulfilled / rejected 속성으로 case에 따라 데이터 처리를 할 수 있다.

 

 

- 예제

 - Store 생성

import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { resultSlice } from "./resultSlice";

// helper 함수인 combineReducers를 사용해 자동적으로 병합하여 Reducer 생성
const reducer = combineReducers({ resultSlice: resultSlice.reducer});

// configureStore로 Store 생성
export default configureStore({
  reducer,
});

 

 - Slice 및 Thunk 생성

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

// 비동기 Thunk 생성
export const searchResultRequest = createAsyncThunk(
// action type
  "request",
  
// 비동기 요청
  async (매개변수를 넣을 수 있음) => {
    const response = await api.get("요청 URL");
    return response.data;
  }
);

// Slice 생성
export const resultSlice = createSlice({
  name: "result",
  // 초기 값 설정
  initialState: {data: []},
  // 기본 reducer action logic 추가하는 곳
  reducers: {},
  extraReducers: {
  // pending(대기), fulfilled(완료), rejected(거부) 세 가지를 이용하여 경우에 따라 처리 가능
    [searchResultRequest.fulfilled]: (state, { payload }) => {
      state.data = payload.data; // payload = action에 넘겨진 Data   
    }
  },
});

export default resultSlice.reducer;

 

 - Provider Wrapping

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import store from "./redux/store";

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

 

 - useDispatch & useSelector

import React from "react";
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { searchResultRequest } from "../../redux/resultSlice";


const example = () => {
  // dispatch 사용
  const dispatch = useDispatch();
  
  // resultSlice의 data를 선택
  const resultLists = useSelector((state) => state.resultSlice.data);
  
  //dispatch로 searchResultRequest 실행
  dispatch(searchResultRequest(넣을 매개변수));
};

기존에 짠 코드에서 보기 쉽게 수정하다 보니 좀 빈약해 보이지만, 동작 방식을 정리하면 dispatch로 searchResultRequest를 실행하면 createAsyncThunk에 정의한 대로 비동기 요청을 보낸 뒤, extraReducers에 정의한 대로 (fulfilled) state를 갱신 및 store에 보관한다.

 

잘못된 내용이나 보완이 필요하다면 댓글 부탁드립니다!