상태를 관리하고 업데이트를 하기 위한 상태 관리 라이브러리이다. 애플리케이션의 많은 부분에 필요한 전역 상태를 관리하는 데 도움이 된다.
리덕스를 사용하면 애플리케이션의 상태가 언제, 어디서, 왜 어떻게 업데이트되는지, 그리고 이러한 변경이 발생할 때 로직이 어떻게 작동하는지 더 쉽게 이해할 수 있다.
리덕스 툴킷은 리덕스 사용 사례를 단순화 하는데 목적이 있다.
리덕스 툴킷은 리덕스에 대한 세 가지 일반적인 문제를 해결하기 위해 만들어졌다.
- Redux저장소 구성이 너무 복잡하다.
- Redux에서 유용한 작업을 수행하려면 많은 패키지를 추가해야 한다.
- Redux에는 너무 많은 상용구 코드가 필요하다.
리덕스 툴킷을 사용하면 권장 모범 사례를 적용하고, 좋은 기본 동작을 제공하고, 실수를 포착하고, 더 간단한 코드를 작성할 수 있으므로 리덕스 어플리케이션을 더 쉽게 작성하고 개발 속도를 높일 수 있다.
Redux Toolkit 및 React-Redux 패키지를 프로젝트에 추가한다.
npm install @reduxjs/toolkit react-redux
src/app/store.js
라는 파일을 생성한다. 아래와 같이 작성하면 Redux 저장소가 생성된다.
// app/store.js
import { configureStore } from '@reduxjs/toolkit'
export const store = configureStore({
reducer: {},
})
스토어가 생성되면 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
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>
)
}
참고자료:
리덕스툴킷 공식문서- 튜토리얼
리덕스 공식문서