Redux toolkit - Redux toolkit 기본

이전에서 보았던 redux는 기본설정(boilerplate)가 복잡하였다.

 

기존 redux에서 달라진 점은 다음과 같다.

• intialState와 reducer를 createSlice 내에서 묶어서 관리
• action,action creator가 reducer내에서 자동설정
• nested state object에 대해 immer package 없이 간편하게 처리
• combineReducer 함수 import 불필요

 

redux-toolkit에 추가되는 함수는 다음과 같다.

• createSlice : action, action creator, initialstate, reducer 관리
• configureStore : 기존 createStore 대체

위의 사항들을 기반으로 구현된 기본 redux toolkit 구성은 다음과 같다.

 

// cakeSlice.js
const { createSlice } = require('@reduxjs/toolkit');

const cakeSlice = createSlice({
  name: 'cake',
  initialState: {
    nested: {
      numOfCakes: 10,
    },
  },
  reducers: {
    ordered: (state) => {
      state.nested.numOfCakes--;
    },
  },
});

// export reducer && actions
module.exports = cakeSlice.reducer;
module.exports.cakeActions = cakeSlice.actions;

//icecreamSlice.js
const { createSlice } = require('@reduxjs/toolkit');

const icecreamSlice = createSlice({
  name: 'icecream',
  initialState: {
    numOfIcecreams: 10,
  },
  reducers: {
    ordered: (state, action) => {
      state.numOfIcecreams -= action.payload;
    },
  },
});

//export reducer && actions
module.exports = icecreamSlice.reducer;
module.exports.icecreamActions = icecreamSlice.actions;

//index.js
const { configureStore } = require('@reduxjs/toolkit');
const cakeReducer = require('./cakeSlice');
const icecreamReducer = require('./icecreamSlice');
const cakeActions = cakeReducer.cakeActions;
const icecreamActions = icecreamReducer.icecreamActions;

const store = configureStore({
  reducer: {
    cake: cakeReducer,
    icecream: icecreamReducer,
  },
});

console.log('initialState: ', store.getState());

const unsubscribe = store.subscribe(() => {
  console.log(store.getState());
});

store.dispatch(cakeActions.ordered());
store.dispatch(icecreamActions.ordered(3));

unsubscribe();