팀 프로젝트와 사이드 프로젝트에서 리덕스를 사용한 경험은 있었다. 회사에서 리덕스 툴킷을 사용중이어서 공부하게 되었다..!
리덕스 툴킷 어렵지만 리덕스를 알아야 쓸 수 있는 확장판 개념이다.

Redux toolkit

리덕스를 더 쉽게 -> 리덕스를 위한 도구 모음

리덕스의 단점

• 리덕스 스토어 환경 설정은 어렵다.
• 여러 라이브러리, 패키지를 설치해야 하는데 개발자마다 스타일이 다르다.
• 코드를 너무 많이 작성해야한다.

리덕스 툴킷에서는 리덕스와 다른 7가지가 있다.

일단 결론부터 말한다.

• RTK 즉, 리덕스 툴킷은 기존 리덕스의 문제를 개선하고, 리덕스 로직을 작성하는 표준을 제안한다.
• 스토어 구성은 createStore가 아닌 configureStore 를 사용한다.
• 리덕스 로직을 작성할 때는 createSlice를 사용한다.
• 비동기 로직은 createAsyncThunk를 사용한다.

ConfigureStore

configureStore 함수는 reducer, middleware, devTools, preloadedState, enchancer를 전달한다.

• reducer : 단일 함수를 전달, 스토어의 루트 리듀서로 바로 사용할 수 있다.
• middleware : 기본적으로 리덕스 미들웨어를 담는 배열,
• devTools: 불리언값으로 리덕스 개발자 도구를 끄거나 켠다.
• preloadedStates : 스토어의 초기값을 설정할 수 있습니다.
• enchaners : 기본은 배열 가끔은 콜백

middleware??

소프트웨어 공학에서 미들웨어란 운영 체제와 응용 소프트웨어 중간에서 조정과 중개의 역할을 수행하는 소프트웨어로 정의된다.

리덕스 미들웨어는 dispatch된 액션이 리듀서에 도달하기 전 중간에서 역할을 수행한다.

createSlice

• 리덕스 로직을 작성하는 표준 접근법.

createAsyncThunk

비동기 동작을 제어하기 위한 함수

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'
import { userAPI } from './userAPI'

const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId)

    return response.data
  }
)

extraReducers 와 조합

• pending -> 로딩 상태
• fulfilled -> 완료 상태
• rejected -> 실패

즉, promise 결과에 따라 로직 실행을 정할 수 있다.

const usersSlice = createSlice({
  name: 'users',
  initialState: { entities: [], loading: 'idle' },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserById.pending, (state) => {})
      .addCase(fetchUserById.fulfilled, (state, action) => {
	      state.entities.push(action.payload)
      })
      .addCase(fetchUserById.rejected, (state) => {})
  },
})