[React] 리덕스 툴킷 Redux Toolkit 사용하기

1. Redux Tookit이란?

상태관리를 할 수 있는 라이브러리인 Redux에서 공식적으로 추천하는 라이브러리로 기존에 만들어야하는 수많은 보일러 플레이트를 제거하여 Redux 코드를 쉽게 작성할 수 있다.

 

2. Redux 언제 써야할까?

앱 전체의 상태관리가 필요할 때

복잡한 비동기 처리가 있는 상태관리가 필요할 때

앱의 상태가 복잡하고 이를 체계적으로 관리하고 싶을 때 사용하면 좋다.

 

3. Redux Toolkit 사용하기

공식문서 확인

사용하기 전 npm install @reduxjs/toolkit react-redux 으로 리덕스와 리덕스 툴킷 설치하기

 

1) createSlice

Reducer의 초기상태, 이름, Reducers를 편하게 만들어주도록 도와주는 역할

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  value: 0,
}

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

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

export default counterSlice.reducer

위 코드는 initialState 객체에 value는 0으로 초기 값을 지정하고, createSlice를 이용해 counterSlice를 생성한다.

 

counterSlice에는 counter라는 슬라이스 이름과 앞서 정의한 initialState 객체를 전달한다.

reducers는 각 action에 대한 reducer 함수를 정의하는데 increment는 1증가, decrement는 1감소시키고

incrementByAmount는 payload(전달한 데이터)만큼 증가시킨다.

 

counterSlice.actions를 통해 각 action에 대한 action생성자 함수를 자동으로 생성하고 reducer를 반환한다.

 

2) configureStore

configureStore 함수는 Redux Store 즉, 전역 상태를 저장하고 관리하는 걸 설정해주는 도구이다.

리덕스로 스토어를 생성하려면 과정이 복잡하지만, Redux Toolkit의 configureStore를 사용하면 쉽게 생성할 수 있다.

// store.js
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counterSlice";

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

앞서 만들었던 counterReducer 리듀서를 불러오고 configureStore함수를 사용해서 Redux Store를 설정한다.

reducer는 reducer 객체 또는 리듀서를 결합할 함수를 지정할 수 있으며 위에선 counter라는 이름으로 counterReducer를 등록한다.

 

이렇게 설정한 Redux Store는 리덕스 툴킷이 자동으로 미들웨어를 추가하고 보일러 플레이트를 최소화 시킨다.

 

3) Provider를 App 전역에 등록하기

Provider 컴포넌트를 사용해서 작성했던 store를 전역에서 사용할 수 있도록 하기 위해 최상단에 위치시킨다.

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

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

 

4) 액션 호출하기

이제 사용할 컴포넌트에 위에 정의했던 액션을 사용해서 카운터 기능을 구현할 수 있다.

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

export 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>
  )
}

useSelector 훅은 상태값을 가져올 수 있고 useDispatch 훅은 dispatch 함수(액션 실행)를 가져올 수 있다.

그래서 state.counter.value 값을 가져와서 count 변수에 저장한다.

 

첫번째 버튼을 클릭하면 dispatch(increment())를 호출해서 increment액션(1 증가)을 디스패치 한다.

두번째 버튼을 클릭하면 dispatch(decrement())를 호출해서 decrement액션(1 감소)을 디스패치 한다.

 

이렇게 리덕스 툴킷으로 카운터를 증감하는 컴포넌트 완성!