[react] Redux-Toolkit으로 상태관리 하기

들블리셔·2022년 9월 12일

React redux

Redux-Toolkit

전에 올린 게시물에 대한 설명이 너무 부족해서
더 자세히 알아보았다.

redux-toolkit은 redux가 공식적으로 만든 라이브러리이다.

기존의 redux로 상태관리를 해보지는 않았지만 복잡함을 낮추고 사용성을 높히기 위해서 나왔다고 한다. 꼭 작성해야 하는 상용구 코드들도 많고 복잡하다고 한다.

설치

npm install @reduxjs/toolkit react-redux

store.js 만들어주고 코드 복붙

state 보관해주는 파일이다.

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

index.js

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

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

Provider,store import하고
Provider 컴포넌트로 감싸준다.
import해온 store를 Provider 컴포넌트의 속성값으로 설정한다.

store.js

import { configureStore, createSlice } from '@reduxjs/toolkit'
import user from './store/userSlice.js'
import cart from './store/cartSlice.js'

export default configureStore({
    reducer: {
        user : user.reducer,
        cart : cart.reducer
    }
})

user,cart라는 두 개의 컴포넌트를 만들어 사용해보았다.

store.js에서 코드를 작성하지않고 각각 파일을 만들어서 분리 시켰다.
대게 그렇게 한다고 한다.

cartSlice(cart컴포넌트).js

사용할 리듀서의 이름을 정하고 그걸 createSlice로 지정해준다.
reducers에서 이제 상태가 변하면 어떻게 실행될지 정하는 부분이다.

import { createSlice } from '@reduxjs/toolkit'
let cart = createSlice({
    name: 'cart',
    initialState:
        [],
    reducers: {
        addCount(state, action) {
            let findProduct = state.findIndex((a) => { return a.id === action.payload })
            state[findProduct].count++
        },
        removeCount(state, action) {
     
        },
        addProduct(state, action) {
         
        },
        
    }
})
export let { addCount, addProduct, removeCount } = cart.actions
export default cart

initialState는 state 초기값
reducers는 setState라고 생각하면 편하다.

addCount,removeCount,addProduct같은 함수를 action이라고 한다.

state와 action 이 두개의 인자를 받아온다.
state는 현재 state값이고,
action은 reducer 함수를 거쳐 새로운 state를 리턴한다.

다른 컴포넌트에서 사용하기 위해 export 하는것도 잊지말자.

Cart.js

cartSlice.js에서 만들어 놓은 action함수를 다른 컴포넌트에서 사용해보자.

import { useDispatch, useSelector } from 'react-redux'
import { addCount, removeCount } from '../store/cartSlice.js'

function ItemList() {
    let state = useSelector((state) => state)
    let dispatch = useDispatch()

    return (
        < tbody >
            {
                state.cart.map((val, idx) =>
                    <tr key={idx}>
                        <th>{state.cart[idx].id}</th>
                        <th>{state.cart[idx].name}</th>
                        <th>{state.cart[idx].count}</th>
                        <th style={{display: 'flex', gap: '5px', justifyContent: 'center'}}>
                            <button onClick={() => {
                                dispatch(addCount(state.cart[idx].id))
                            }}>+</button>
                        </th>
                    </tr>
                )
            }
        </tbody >
    )

}