Redux Toolkit - createSlice 알아보기

Redux toolkit을 접하고 이것저것 써보던 중 createSlice를 통해 코드량이 드라마틱하게 줄어드는 경험을 하고 헐레벌떡 기록을 남겨본다.

기존에는?

우선 리덕스 모듈하나를 만들려면 action type을 정의하고, action creator를 만들고 redux-saga를 사용하는 경우 saga 만들고, reducer까지 만들어야 하는데 이 모든게(saga 빼고) createSlice 한 방에 가능하다.

한번 써보자

긴 말 필요없이 바로 코드

interface User {
  uid: string;
  displayName: string;
  photoURL: string;
}

interface UserState {
  user: User;
}

const initialState: UserState = {
  user: {
    loading: false,
    data: null,
    error: null,
  }
}

const slice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    signInRequest(state, action: Action) {
      state.user = {
        loading: true,
        data: null,
        error: null,
      };
    },
    signInSuccess(state, { payload: userInfo }: PayloadAction<User>) {
      state.user = {
        loading: false,
        data: userInfo,
        error: null,
      };
    },
    signInFailure(state, { payload: error }: PayloadAction<Error>) {
      state.user = {
        loading: false,
        data: null,
        error,
      };
    },
  },
})    

이렇게 해주면 action type, action creator, reducer까지 모두 작성완료 된 것이라 보면 된다.

이제 위 slice를 활용할 때 각각의 액션 타입은 자동으로 (name)/(reducers의 method명)으로 선언된다. action creator함수를 활용하기 위해서는 아래와 같이 변수를 export해주면 된다.

export const { signInRequest } = slice.actions;

리듀서는?

export { reducer: user } = slice;

이렇게 해주면 끝!

action creator가 payload를 받는 경우엔 아래와 같이 prepare 속성을 활용한다.

// (...생략...)
reducers: {
  signInRequest: {
    reducer: // 위와 동일,
    prepare: (username, password) => ({
      payload: { username, password },
    }),
  },
// (...생략...)