redux-toolkit 리팩토링 4 - createSlice

간단한 To-Do를 구현하면서 리덕스 공부를 해보았고,
이 포스트에서도 역시 To Do를 간단하게 완성한 후 redex에서 제공하는 tookit을 적용해 코드를 더욱 더 간결하게 리팩토링을 해보도록 하겠다.

지난 createAction 포스트에서 작성했던 동일한 서론으로 시작해보겠다.

why toolkit?

Redux를 사용하다보면 action creator 혹은 Boilerplate Code와 같이 반복되는 코드를 작성하는 등, 코드가 길어지는 경우가 많다. 이에 많은 개발자분들이 불편함을 느끼게 되었고, 그로 인해 Redux-toolkit이 탄생하게 되었다.

redux-toolkit 이란?
보다 효율적인 코드작성을 위한 package라고 보면 된다.
더 적은 양의 코드로 toolkit 적용 전의 코드와 같은 기능을 하도록 도와주는 것으로 보자.

[종류]
1. createAction
2. createReducer
3. configureStore
4. createSlice
(클릭하시면 해당 포스트로 이동합니다.)

이 포스트에서는 4. createSlice의 내용을 다루도록 하겠다.

설치

  yarn add @reduxjs/toolkit

createSlice

createSlice 함수는 앞서 리팩토링했던 코드들의 라인을 줄여주는 역할을 한다고 한다.
또한, createSlice 함수는 reducer뿐 만 아니라 action까지 생성해준다.
한마디로 action, reducer을 캡슐화한 버전이 createSlice인 것이다.

적용 전

const addToDo = createAction("ADD")  
const deleteToDo = createAction("DELETE")

const reducer = createReducer([], {
  [addToDo]: (state, action) => {  
    state.push({ text: action.payload, id: Date.now() });   },                                                     
  [deleteToDo]: (state, action) =>  // 리턴 O 
    state.filter(toDo => toDo.id !== action.payload)
})

const store = configureStore({ reducer })

export const actionCreators = {
  addToDo,
  deleteToDo
}

적용 후
createSlice는 몇가지 옵션을 받는다

• name
• initialState
• reducers(action creater를 만들기보다는 action을 직접 넣어보겠음.)

const toDos = createSlice({
  name: "toDoReducer",
  initialState: [].
  reducers: {    // addToDo의 명칭 중복 방지를 위해 add로 정정
    add: (state, action) => {
      state.push({ text: action.payload, id: Date.now() });
    },
    remove: (state, action) =>  // 명칭 중복 방지를 위해 deleteTodo => remove로 정정
    state.filter(toDo => toDo.id !== action.payload)
  }
})
// createSlice는 action, reducer기능 모두 가능함. 
// 따라서 아래처럼 console.log()로 확인해보면 actions, caseReducers, reducer가 담긴 것을 확인할 수 있다.
console.log(toDos);
// reducer함수를 삭제하고 createSlice로 대체했으니 toDos의 reducer를 가져와 store의 reducer를 다시 설정해줘야 한다.
const store = configureStore({ reducer: toDos.reducer });

// actionCreator를 createSlice로 대체했으니 알맞게 아래와 같이 변경. 
// 따라서 Home.js & ToDo.js도 수정해줘야 함.
export const { add, remove } = toDos.actions;

export default store;

마치며

createAction, createReducer 모두 같은 기능을 하면서 코드줄 수를 혁신적으로 줄이게 하는 것이 경이로웠다. 하지만 createSlice는 위의 두개를 모두 캡슐화(포함)하면서 코드가 더 줄어들게 만들고 있다.. 아.. 여지껏 redux 공부를 소홀히 하였던 내가 정말 한심해보여지는 순간이다..
물론 리덕스 없이 파이널 프로젝트를 해내서 그런지 리액트에 대한 자신감이 높아졌지만! 이제는 redux와 react의 적절한 조화를 이루면서 프로젝트를 진행해야겠다.

이력서를 열심히 작성하고 열심히 구직 중이지만, 여간 힘든게 아니다.
부트캠프를 무사히 수료했지만 끝난게 끝난 것이 아닌.. 새로운 시작인거다!!

프론트엔드 웹 개발자 이재훈 파이팅!!