redux-toolkit 간단한 사용 방법

redux 를 보다 쉽고 간단하게 사용할 수 있도록 해주는 라이브러리입니다.

아래는 설치방법입니다.

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

예제

아래 간단한 예제와 설명을 통해서 사용 방법을 익혀보시면 됩니다.

index.ts 에서 Provider 와 store 를 가져와서 등록해줍니다.

// index.tx
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';
import './index.css';

const container = document.getElementById('root')!;
const root = createRoot(container);

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

store.ts

configureStore 은 store 를 만들어주고 reducer 를 이용해 리듀서 slice 들을 조합해서 사용할 수 있게 해줍니다.

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import countReducer from './countReducer';

export default configureStore({
  reducer: {
    count: countReducer
  },
});

countReducer.ts

createSlice 를 이용해서 리듀서 slice 를 생성합니다.

name, initialState, reducers 는 필수값으로 initialState 는 초기 셋팅값, reducers 안에 기능(함수)들을 탑재해 줍니다.

PayloadAction 은 payload 에 타입을 지정할 수 있게 해주는 제네릭 입니다.

// CountReducer.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";

export interface CounterState {
  value: number;
}

const initialState: CounterState = {
  value: 0
};

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

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

지금까지 왔으면 모든 redux-toolkit 셋팅이 완료되었습니다.

위 리덕스를 이용해 컴포넌트를 조작해봅시다.

// Counter.tsx
import React, { useState } from "react";

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

export function Counter() {
  const count = useSelector(
    (state: { counter: { value: number } }) => state.counter.value
  );
  const dispatch = useDispatch();
  const [incrementAmount, setIncrementAmount] = useState("2");

  const incrementValue = Number(incrementAmount) || 0;

  return (
    <div>
      <div>
        <button onClick={() => dispatch(decrement())}>-</button>
        <span>{count}</span>
        <button onClick={() => dispatch(increment())}>+</button>
      </div>
      <div>
        <input
          value={incrementAmount}
          onChange={(e) => setIncrementAmount(e.target.value)}
        />
        <button onClick={() => dispatch(incrementByAmount(incrementValue))}>
          만큼 증가
        </button>
      </div>
    </div>
  );
}