Redux Tookit📑

• 기존의 Redux 코드를 조금 더 간소화 할 수 있음

• Redux 외에 설치해야 했던 각종 패키지 기능을 내장하고 있어, 더 간편하게 다양한 패키지 기능을 사용할 수 있도록 도움

• $ yarn add @reduxjs/toolkit react-redux

🧡reducer 생성

✨기존 reducer생성방식

• 코드 오류방지와 가독성 향상을 위해 액션타입과, 액션객체생성함수를 따로 정의한 뒤 리듀서에 적용하였음

기존 Reducer생성방식

//액션타입생성
export const INC_COUNT = 'counter/INC_COUNT'

//액션생성함수
const increase = () => {
  return {
    type: INC_COUNT,
  }
}

//초기값
const initialState = 0

//리듀서
export default function couter(state = initialState, action) {
  switch (action.type) {
    case INC:
      return state + 1
  }
}

✨toolkit으로 reducer생성 간소화

• 액션타입지정변수와 액션객체생성함수를 따로 분리하지 않고 createAction으로 조금 더 간편하게 action을 정의
• createReducer로 switch문을 사용할 필요 없이 간결하게 작성

toolkit을 활용한 Reducer생성방식

import { createAction, createReducer } from "@reduxjs/toolkit";

// 액션생성
export const increase = createAction('counter/increase')

//초기값
const initialState = 0

//리듀서
const counter = createReducer(initialState, {
	[increase] : (state,action) => state + 1
})

export default counter

🧡Store 생성

• 기존의 createStore가 아닌 configureStore로 store를 생성

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

const store = configureStore({
  reducer: counterReducer
})

• store가 여러개일 때 기존방식과 같이 combineReducers사용

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterReducer'
import postReducer from './postReducer'

const rootReducer = combineReducers({
  counter: counterReducer,
  post: postReducer
})

const store = configureStore({
  reducer: rootReducer
})

🧡Slice

• createAction과 createReducer를 하나의 함수로 통합하여 사용하는 방식
• 슬라이스 이름.actions , 슬라이스 이름.reducers으로 각 액션들과 리듀서를 꺼내올 수 있다

//counterSlice.js
import { createSlice } from "@reduxjs/toolkit";

const initialState = 0;

counterSlice = createSlice({
  name: counter,
  initialState,
  reducers: {
    increase: (state) => state + 1,
    decrease: (state) => state - 1,
  }
})

export const { increase, decrease } = counterSlice.actions;
export default counterSlice.reducer;

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

const store = configureStore({
  reducer: counterReducer
})