Redux toolkit - extraReducers(1) - module

redux와 redux toolkit은 얼핏보면 사용에 있어 다른 점이 없어보인다.

 

하지만 특정 module의 action이 호출 되었을때 다른 module의 state값을 바꿔야 할때  redux와 redux toolkit의 동작방식은 달라진다.

 

다음의 예시를 보자

CAKE_ORDERED action이 발생했을때 numOfIcecreams도 1씩 줄어들게 reducer를 수정하도록하자.

 

 기존 redux의 경우 아래 처럼 특정 store module의 initial state와 관련없는 state를 변화시켜도 문제 없이 작동한다.

...

const icecreamReducer = (state = icecreamInitialState, action) => {
  switch (action.type) {
    case 'ADD_ICECREAM':
      return {
        ...state,
        numOfIcecreams: state.numOfIcecreams - action.quantity,
      };
    case 'ADD_CAKE':
      return {
        ...state,
        numOfIcecreams: state.numOfIcecreams - 1,
      };
    default:
      return state;
  }
};

...

---

redux-toolkit의 경우 action을 현재 slice의 name + action name으로 자동 지정해주기 때문에 어떻게 만들어야할지 감이 오질 않는다.

위의 경우 ordered의 정확한 action이름은 `icecream/ordered` 가 된다.

 

위의 상황을 해결할 수 있는 것이 바로 extraReducers 이다.

//icecreamSlice.js

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

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

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

위 처럼 'cake/ordered' action이 호출되었을 때 numOfIcecream도 1씩 줄어들게 설정할 수 있다