Redux] 리덕스 툴킷에 대해

리덕스 툴킷이란 무엇일까요?

리덕스 툴킷은 리덕스를 더 사용하기 쉽게 만들기 위해 리덕스에서 공식 제공하는 개발도구입니다.

Redux 사용 시 문제점

1. 기존 리덕스는 스토어를 구성하는 것이 복잡합니다.
2. 리덕스가 유용해지려면 추가적으로 여러 패키지들이 필요합니다. 
3. 한 작업에 필요한 코드 양이 많습니다.

리덕스 툴킷 설치

 

npm install @reduxjs/toolkit

 

---

사용 방법

createSlice

액션과 리듀서를 전부 가지고 있는 Ducks 패턴입니다.

createSlice({
  name: '액션의 경로를 잡아줄 이름',
  initialState: [],
  //액션으로 구분을 준 리듀서
  reducers: {
    //액션을 선언하고 해당 액션이 dispatch되면 state를 가지고 액션을 처리합니다.
    action1 : (state, payload) {
      //action1 logic
    },
     action2 : (state, payload) {
      //action2 logic
    },
  }
])

리덕스 툴킷은 immer를 따로 추가로 설치하지 않아도 createReducer와 createSlice 함수는

불변성까지 자동으로 관리해주는 유틸을 내재하고 있습니다.

createSlice는 액션을 선언하고 해당 액션이 dispatch 되면 바로 state를 가지고 해당 액션을 처리합니다.

리덕스 툴킷을 활용한 createSlice 적용 예시

const initialState = {
  list: [],
};

const post = createSlice({
  name: 'post',
  initialState,
  reducers: {
    addPost(state, action) {
      const contents = action.payload.contents;
      const username = action.payload.username;
      console.log(action.payload);
      state.list.push(contents, username);
    },

    getPost: (state, action) => {
      state.list = action.payload;
    },

    getOnePost: (state, action) => {
      state.line = action.payload;
    },

    editPost: (state, action) => {
      const editList = state.list.map((post) => {
        if (post.postId === action.postId) {
          return action.post;
        }
        return post;
      });
      return { ...state, list: editList };
    },

    deletePost: (state, action) => {
      const deleteList = state.list.filter(
        (post) => post.postId !== action.postId
      );

      return { ...state, list: deleteList };
    },
  },
});