Redux toolkits을 사용해 효과적으로 전역상태를 관리하자

 

리액트 전역상태관리 라이브러리 Redux를 알아보고 사용해보자

위 글에서 우리는 Redux의 상태관리에 대해 알아보았습니다.

 

If you are writing any Redux logic today, you should be using Redux Toolkit to write that code!

RTK includes utilities that help simplify many common use cases, including store setup, creating reducers and writing immutable update logic, and even creating entire "slices" of state at once.

 

리덕스 공식 홈페이지에서 리덕스 툴킷 사용을 적극 권장하고 있습니다.

store, reducers, slices 등 redux를 구성하는 대부분을 손쉽게 만들고 적용할 수 있기 때문이라고 합니다.

 

지금 여러분이 리덕스를 사용하고 있지만 @redux/toolkit을 적용하고 있지 않다면 지금 당장 사용해보세요. DX(Develop experience)가 달라집니다.

 

 

1. Store setup

configureStore를 이용해 간단하게 store를 setup해보세요.

import { configureStore } from '@reduxjs/toolkit'
import usersReducer from './usersReducer'
import postsReducer from './postsReducer'

const store = configureStore({
  reducer: {
    users: usersReducer,
    posts: postsReducer,
  },
})

export default store

이렇게 만든 store를 index.tsx에서 불러오기만 하면 됩니다.

 

2. CreateReducer

const todosReducer = createReducer([], (builder) => {
  builder
    .addCase('ADD_TODO', (state, action) => {
      // "mutate" the array by calling push()
      state.push(action.payload)
    })
    .addCase('TOGGLE_TODO', (state, action) => {
      const todo = state[action.payload.index]
      // "mutate" the object by overwriting a field
      todo.completed = !todo.completed
    })
    .addCase('REMOVE_TODO', (state, action) => {
      // Can still return an immutably-updated value if we want to
      return state.filter((todo, i) => i !== action.payload.index)
    })
})

 

 

3. CreateSlice

const usersSlice = createSlice({
  name: 'users',
  initialState: {
    loading: 'idle',
    users: [],
  },
  reducers: {
    usersLoading(state, action) {
      // Use a "state machine" approach for loading state instead of booleans
      if (state.loading === 'idle') {
        state.loading = 'pending'
      }
    },
    usersReceived(state, action) {
      if (state.loading === 'pending') {
        state.loading = 'idle'
        state.users = action.payload
      }
    },
  },
})

 

위 세가지만 알고 있으면 정말 손쉽게 redux를 프로젝트에 적용할 수 있습니다.

 

이번에 유튜브 영상으로 로그인 정보를 전역상태로 관리하는 프로젝트를 올리겠습니다. 영상으로 배운다면 훨씬 쉽게 이해가 갈 것이라 생각합니다.