Today I Learned

오늘 한일✅

• redux-toolkit으로 리팩토링했다.

해결✅

• 1. action items와 action creators가 필요없다.

// 1. action items
// const ADD_TODO = "ADD_TODO";
// const REMOVE_TODO = "REMOVE_TODO";
// const SWITCH_TODO = "SWITCH_TODO";

// 2. action creators(1)
// export const addTodo = (payload) => {
//   return {
//     type: ADD_TODO,
//     payload,
//   };
// };

// 2. action creators(2)
// export const removeTodo = (payload) => {
//   return {
//     type: REMOVE_TODO,
//     payload,
//   };
// };

// 2. action creators(3)
// export const switchTodo = (payload) => {
//   return {
//     type: SWITCH_TODO,
//     payload,
//   };
// };

• 2. reducer를 toolkit으로 변경한다.

// AS IS
// 4. reducer를 만들 것
// const todos = (state = initialState, action) => {
//   switch (action.type) {
//     case ADD_TODO:
//       return [...state, action.payload];
//     case REMOVE_TODO:
//       return state.filter((item) => item.id !== action.payload);
//     case SWITCH_TODO:
//       return state.map((item) => {
//         if (item.id === action.payload) {
//           return { ...item, isDone: !item.isDone };
//         } else {
//           return item;
//         }
//       });
//     default:
//       return state;
//   }
// };

//TOBE
// toolkit으로 변경
const todosSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {
    addTodo: (state, action) => {
      return [...state, action.payload];
    },
    removeTodo: (state, action) => {
      return state.filter((item) => item.id !== action.payload);
    },
    switchTodo: (state, action) => {
      return state.map((item) => {
        if (item.id === action.payload) {
          return { ...item, isDone: !item.isDone };
        } else {
          return item;
        }
      });
    },
  },
});

• 3. createSlice가 만든 유니크한 액션값을 export해서 dispatch로 넘겨준다.

// 5. reducer를 export
// export default todos;

//createSlice가 만든 유니크한 액션값을 export해서 dispatch로 남겨준다.
export default todosSlice.reducer;
export const { addTodo, removeTodo, switchTodo } = todosSlice.actions;

알게 된점✅

• toolkit으로 이렇게 코드가 줄어들다니..신기하다