[Redux-Toolkit] createSlice에서 action.payload 커스터마이징 하기

Redux-Toolkit에서 createSlice 함수를 제공해줍니다. 기존 Redux에서 action, reducer, state를 하나의 함수에서 관리하도록 해주는 함수입니다. 

 

오늘은, createSlice에서 reducer를 정의하고 reducer에서 인자로 받는 action.payload를 커스터마이징 해주는 법에 대해서 포스팅 해보려 합니다😀

 

현재 사용자가 로그인 해있는 지를 확인하고 이에 따라 state를 변경해주는 loadUser라는 reducer를 정의해봅시다.

getToken(local storage에 JWT가 있는지 확인하는 함수)을 불러와서 토큰 존재 여부를 확인하고 이에 따라 state.isAuthenticated를 변경해줄 예정입니다.

const authSlice = createSlice({
  name: 'auth',
  initialState: {
   isAuthenticated: false,
  }
  reducers: {
    loadUser: {
      reducer: (state) => {
        // 함수를 호출하는 것은 철칙에 맞지 않다.
        state.isAuthenticated = getToken();
      },

    },
  },

 

reducer에서는 state의 값만 변경해주는 것이 redux의 작동 철칙이기 때문에, 직접적으로 getToken 함수를 사용해주지 않습니다. 이를 위해 action.payload를 커스터마이징 해주는데, 이는 prepare를 이용해서 가능합니다. 아래를 보시면, reducer내의 따로 prepare 로직을 작성해주어 action.payload에 getToken의 결과를 넣어서 반환해줍니다.

const authSlice = createSlice({
  name: 'auth',
  initialState: {
   isAuthenticated: false,
  }
  reducers: {
    loadUser: {
      reducer: (state, action) => {
        // action.payload는 isToken
        state.isAuthenticated = action.payload;
      },
      prepare: () => {
        const isToken = !!getToken();
        return { payload: isToken };
      },
    },
  },

 

이렇게 되면, reducer의 인자로 주어진 action의 payload에 prepare에서 반환한 값이 들어가게 됩니다.