[Redux-Toolkit] 리덕스 툴킷 가이드- 공식 문서 정리

Redux란?

상태를 관리하고 업데이트를 하기 위한 상태 관리 라이브러리이다. 애플리케이션의 많은 부분에 필요한 전역 상태를 관리하는 데 도움이 된다.

리덕스를 사용하면 애플리케이션의 상태가 언제, 어디서, 왜 어떻게 업데이트되는지, 그리고 이러한 변경이 발생할 때 로직이 어떻게 작동하는지 더 쉽게 이해할 수 있다.

Redux-Toolkit이란?

리덕스 툴킷은 리덕스 사용 사례를 단순화 하는데 목적이 있다.

리덕스 툴킷은 리덕스에 대한 세 가지 일반적인 문제를 해결하기 위해 만들어졌다.

• Redux저장소 구성이 너무 복잡하다.
• Redux에서 유용한 작업을 수행하려면 많은 패키지를 추가해야 한다.
• Redux에는 너무 많은 상용구 코드가 필요하다.

리덕스 툴킷을 사용하면 권장 모범 사례를 적용하고, 좋은 기본 동작을 제공하고, 실수를 포착하고, 더 간단한 코드를 작성할 수 있으므로 리덕스 어플리케이션을 더 쉽게 작성하고 개발 속도를 높일 수 있다.

패키지 설치

Redux Toolkit 및 React-Redux 패키지를 프로젝트에 추가한다.

npm install @reduxjs/toolkit react-redux

Redux-Toolkit React에 적용하기

Redux 스토어 생성

src/app/store.js 라는 파일을 생성한다. 아래와 같이 작성하면 Redux 저장소가 생성된다.

// app/store.js

import { configureStore } from '@reduxjs/toolkit'

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

Redux 스토어 제공

스토어가 생성되면 Redux 저장소를 가져와 <Provider>로 <App/>을 감싼다.

// index.js

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

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

상태 슬라이스 생성

src/counterSlice.js라는 파일을 추가한다. Redux Toolkit에서 createSlice API를 가져온다. 슬라이스를 생성하려면 슬라이스를 식별하기 위한 문자열 이름, 초기 상태 값, 상태 업데이트 방법을 정의하는 하나 이상의 리듀서 함수가 필요하다.

// src/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

스토어에 슬라이스 리듀서 추가

카운터 슬라이스에서 리듀스 함수를 가져와 비어있던 스토어에 추가를 한다.

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../counterSlice'

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

리액트 내부에서 리덕스 사용하기

• useSelector
  리덕스 저장소에서 데이터를 추출할 수 있다. 등록한 데이터를 가져와서 사용함.
• useDispatch
  useDispatch라는 훅을 이용하여 액션을 실행시켜야 한다. 슬라이스에서 action을 추출해낸 뒤 액션의 이름을 추가하면 된다

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
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

참고자료:
리덕스툴킷 공식문서- 튜토리얼
리덕스 공식문서