[Redux toolkit] createSlice

본 글은 노마더코더의 초보자를 위한 리덕스 101 강의를 들으며 작성한 글입니다.

 

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) =>
    state.filter((toDo) => toDo.id !== action.payload),
});

---

 

createSlice는 reducer뿐만 아니라 action도 자동으로 생성해주는 함수이다.

 

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),
  },
});

 

createSlice에서 reducers를 보면 add: ... , remove: ...로 되어있는 것이 보인다.

이에 따라 add action과 remove action을 알아서 생성해준다.

 

---

const store = congifureStore(reducer);

export const ActionCreators = {
  addToDo,
  deleteToDo,
};

---

 

const store = configureStore({ reducer: toDos.reducer });

export const { add, remove } = toDos.actions;

 

이렇게 생성된 action은 생성된 객체(여기서는 toDos)의 actions 내에 있고,

reducer 역시도 생성된 객체 toDos 안에 있기 때문에 toDos.reducer로 꺼내써야한다.