[Redux] Redux Toolkit

Redux Toolkit

간단하게 말하면 많은 지름길들이 있는 Package라고 보면 된다

적은 양의 Redux 코드로 같은 기능을 하도록 도와주는 것 !

 

npm install @reduxjs/toolkit
or
yarn add @reduxjs/toolkit

 

 

createAction

const ADD = "ADD";
const DELETE = "DELETE";

const addToDo = text => {
  return {
    type: ADD,
    text
  };
};

const deleteToDo = id => {
  return {
    type: DELETE,
    id: parseInt(id)
  };
};

↓ ↓ ↓ ↓

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

console.log(addToDo(), deleteToDo());

 

createAcion은 Redux action type 및 creator를 정의하기 위한 helper 함수

action에 무엇을 보내든 간에 항상 payload와 함께 보내게 된다

const reducer = (state = [], action) => {
  switch (action.type) {
    case addToDo.type:
      return [{ text: action.payload, td: Date.now() }, ...state];
    case deleteToDo.type:
      return state.filter((toDo) => toDo.id !== action.payload);
    default:
      return state;
  }
};

 

 

createReducer()

createReducer를 사용하면 state를 mutate 하기 쉽게 만들어준다

state를 mutate 하는 이유는 Redux 툴킷이 Immer(이머) 아래에서 작동하기 때문

뭔가를 리턴할 때는 꼭 새로운 state여야 한다

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

switch, case를 사용할 필요가 없게 해 주고 첫 번째 인자인 빈 array에 새로운 toDo를 push 해준다

push는 아무것도 리턴하지 않고 state를 mutate 해준다

filter는 state를 mutate 하지 않고 새로운 array를 리턴한다

 

 

configureStore

원할 때 언제든 Redux Developer Tools를 사용할 수 있다

const store = configureStore({ reducer });

 

 

createSlice

createSlice는 reducer뿐만 아니라 actions도 생성해 준다

const toDos = createSlice({
  name: "toDosReducer",
  initialState: [],
  reducers: {
    add: (state, action) => {
      state.push({ text: action.payload, id: Date.now() });
    },
    remove: (state, action) =>
      state.filter((toDo) => toDo.id !== action.payload),
  },
});