RTK (redux tool kit)

install

npm install @reduxjs/toolkit

Redux와의 차이점

내장 라이브러리

불변성을 지키기 위해 사용하던 immer.js가 내장되어있고, 비동기 API 통신을 위한 미들웨어 redux-thunk가 내장되어 있다.

createSlice 생성

기존 리덕스에서는 액션을 디스패치하기 위한 별도의 함수가 필요했고, 액션의 객체를 리듀서를 통해 리턴하는 구조였다. 하지만 createSlice()는 액션에 대한 함수 설정과 리듀서를 따로 생성하지 않아도 된다.

import { createSlice } from '@reduxjs/toolkit'
export const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    plus: state => {
      state.value += 1
    },
    minus: state => {
      state.value -= 1
    },
  },
})

export const { plus, minus } = counterSlice.actions;
export default counterSlice.reducer;

• initialState를 통해 state의 처음 상태를 정의한다.
• reducers에서 액션을 설정한다.
• plus와 mius를 export해서 App.jsx에 import한다.
• slice는 slice.reducer로 내보낸다. store.js는 위 파일을 전부 리듀서로 받는다

Store 만들기

기존 리덕스에서는 스토어 생성 후 미들웨어가 한개 이상이라면 따로 코드를 추가로 작성해야하지만 configureStore()는 별도의 메서드 없이 바로 미들웨어를 추가할 수 있다는 장점이 있다.

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

export const store = configureStore({
	reducer: counterSlice,
    middleware: [...middlewares]
})