redux-toolkit

참고자료: 화해 블로그

redux-toolkit이 등장하게 된 배경 :
설치해야할 패키지와 작성해야할 코드의 양이 많다.
store 등록, Action, Action creator, Reducer, container, middleware 등

Slice:
1) Redux를 구성하는 요소들의 조각
(예: Action types, Action creator, Reducer 등등) as duck pattern.
2) {createSlice}를 사용하여
Action types,
Action creator,
Reducer
(immer.js가 내장되어있어서 immutable update가 됩니다. state를 복사할 필요가 없습니다.) 생성

1. createSlice

import {createSlice} from '@reduxjs/toolkit';

const counterSlice = createSlice({
    name: 'counter',
    initialState: { count: 0},
    reducers: {
    increase: (state,action) => {
        state.count ++;
    },
    decrease: (state,action) => {
        state.count --;
    },
  },
 });
 
 export const {increase, decrease} = counterSlice.actions; 
 export default counterSlice.reducer; 

위와 같은 코드에서 만들어진 counterSlice의 객체는 다음과 같다.

{
name: 'counter',
actions: {
    increase,
    decrease,
  },
  reducer
}

그 밖의 api
2. createAction

import { createAction } from '@reduxjs/toolkit';

// createAction 함수를 사용하여 액션 생성자 함수 만들기
export const increment = createAction('counter/increment');
export const decrement = createAction('counter/decrement');
export const incrementByAmount = createAction('counter/incrementByAmount', (amount) => ({
  payload: amount,
}));

3.createReducer
초기 상태와 리듀서 로직을 전달한다.
builder 객체를 사용하여 각 액션에 대한 리듀서 로직을 추가함.

import { createReducer } from '@reduxjs/toolkit';
import { increment, decrement, incrementByAmount } from './yourActionFile'; // 액션 파일 경로에 따라 수정

// 초기 상태 정의
const initialState = {
  value: 0,
};

// createReducer를 사용하여 리듀서 함수 생성
const counterReducer = createReducer(initialState, (builder) => {
  builder
    .addCase(increment, (state) => {
      state.value += 1;
    })
    .addCase(decrement, (state) => {
      state.value -= 1;
    })
    .addCase(incrementByAmount, (state, action) => {
      state.value += action.payload;
    });
});

export default counterReducer;

아래와 같은 형식으로 redux store에 만들어준 reducer를 등록할 수 있다.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterReducer'; // 위에서 만든 리듀서 파일 경로에 따라 수정

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

export default store;

4. configStore

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

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

5. createAsyncThunk

import { createAsyncThunk } from '@reduxjs/toolkit';
import api from '../api';

export const fetchUserById = createAsyncThunk('users/fetchById', async (userId) => {
  const response = await api.getUserById(userId);
  return response.data;
});