redux-toolkit 사용법

정리입니다. 참고한 블로그 맨 아래 있습니다.

why redux?

1. 컴포넌트 구조는 앱의 UI를 따르지만, 상태는 그럴 필요가 없다.
2. 상태를 바꾸는 함수가 여러 컴포넌트에 있다.
3. 여러 단계의 컴포넌트에 props를 전달해야한다.
4. 디버깅 시 상태 변경을 추적하기가 어렵다.
   
   
   

용어

state: 그냥 데이터

store: 객체로 저장된 앱의 상태(state 집합)

• 컴포넌트는 스토어를 구독하여 상태가 변경되면 컴포넌트 업데이트
  
  

action: 상태 변경을 일으키는 이벤트에 대한 정적인 정보

• 액션은 타입(이름)을 가져야 하고, 파라미터를 포함할 수 있음
• 리듀서로 전달
  
  

reducer: 액션의 값에 따라 수행될 로직

• (status, acton) => state 형태의 순수함수
• 스토어를 변형(mutate)하지 않고 새 상태를 반환해야 함
  
  

dispatch: 상태를 변경하는 스토어의 내장함수

• 컴포넌트에서 dispatch(action)
  
  

subscribe: 상태를 구독하는 스토어의 내장함수

• subscribe함수에 특정 함수를 전달하면, 업데이트 될 때마다 함수가 호출됨
• 그냥 값을 가져올 떈 selector를 씀
  
  

간단한 업데이트 흐름
컴포넌트에서 store에 action을 보냄(dispatch) → reducer는 action에 맞는 함수 실행→ 반환된 값으로 상태 업데이트

why redux-toolkit?

1. 코드를 줄여준다.
   1) Store생성 시 devTools를 추가해주지 않아도 된다.
   2) Slice에서 액션타입 선언, 액션함수 생성, 리듀서의 기능을 수행한다

2. 쓸모없는 라이브러리 설치를 안해도 된다.
   1) 액션이 많아지면 redux-actions
   2) 불변성 보존을 위한immer
   3) 불필요 리렌더링을 막는 reselect
   4) 비동기를 위한 thunk, saga
   toolkit은 위에서 saga 를 제외한 모든 기능을 제공한다.

3. 위의 이유들로 redux에서도 toolkit 사용을 권장한다.
   
   

toolkit 사용

1. 설치

// redux + JS
npx create-react-app my-app --template redux

// Redux + TypeScript
npx create-react-app my-app --template redux-typescript

// 앱이 있을 때
npm install @reduxjs/toolkit
yarn add @reduxjs/toolkit

2.createSlice

액션 타입, 액션 생성 함수, 리듀서의 기능을 한번에 사용

store/counter.js

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

const counterSlice = createSlice({
  name: "counter",
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -=1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

// dispatch할 때 쉽게 사용하기 위한 export
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

• name: 모듈 이름(액션의 경로)
• initialState: 모듈 초기값
• reducers: 리듀서 모임
  • 리듀서 키 값으로 액션함수 생성
  • incrementByAmount는 action함수의 인자로 들어온 값을 이용하는 리듀서
    
    

엥 근데 위에서 redux는 mutate 하지 말라고 해놓고 왜 함??

1. toolkit은 immer가 있기에 가능
2. mutate the state or return new state
3. return에서 mutate를 하면 당연히 안됨!

3.configureStore

기존의 createStore 대체

store/index.js

import { configureStore } from '@reduxjs/toolkit';
export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

4. dispatch, selector

components/Counter.jsx

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { decrement, increment } from "../store/counterSlice";

export default function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  );
}

참고
https://ko.redux.js.org/tutorials/quick-start
https://velog.io/@djaxornwkd12/Redux-Toolkit-알아보기
https://velog.io/@whljm1003/redux-toolkit리덕스-툴킷-사용법