설치

yarn add @reduxjs/toolkit

npm install @reduxjs/toolkit

Toolkit이 뭘 해주냐?

1. action creator 을 자동생성
2. reducer를 자동생성

configstore.js를 살펴보자

const store = createStore(rootReducer); 
더이상 사용 권장 안함

configStore.js

const store = configureStore({
  todos,
});
요거만 넣어주면 끝임

slice를 사용하면, 자동으로 export를

reducer : 함수이다. state와 action을 받아서 동작을 하는..

action type이 생성된다.
todos/addTodo
todos/removeTodo
todos/switchTodo

정리

원래 리덕스 안에 있었던 개념들을 살펴보자
1. action items
2. action creators

• 여기서는 action 객체들을 만들어
• 그럼 왜 만드냐?, component에 가서 dispatch 안에 넣으려고 만든다.

3. Reducer(= 함수)

• State와 action을 받아가지고 새로운 State를 반환하게 한다.

-> 위 내용 모두 우리가 지금까지 직접 만든 items, creators 들을, 툴킷이 알아서 다 해준다.

4. 그럼 툴킷이 뭘 해주냐?

• action creator를 자동생성해준다
• reducer를 자동생성해준다.
  -> 바로 create Slice를 이용해서 말이다.

5. createSlice가 반환하는 return 값이 todosSlice로 들어간다.

const todosSlice  = createSlice ({
 name:''
 initialState: ''
 reducers:''
  
})

6. action 객체의 타입이 어떻게 들어올까?
   
   todos/addTodo
   todos/removeTodo
   todos/switchTodo

todosSlice.actions = action Creator들

7. dispatch를 할 때

---

기존 리덕스 코드

import { createSlice } from "@reduxjs/toolkit";
import React from "react";
import { v4 as uuidv4 } from "uuid";

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

/**
 * 메서드 개요 : todo 객체를 입력받아, 기존 todolist에 더함
 * 2022.12.16 : 최초작성
 *
 * @param {todo 객체} payload
 * @returns
 */
export const addTodo = (payload) => {
  return {
    type: ADD_TODO,
    payload,
  };
};

/**
 * 메서드 개요 : todo의 id를 입력받아, 일치하는 todolist를 삭제
 * 2022.12.16 : 최초작성
 *
 * @param {todo의 id} payload
 * @returns
 */
export const removeTodo = (payload) => {
  return {
    type: REMOVE_TODO,
    payload,
  };
};

/**
 * 메서드 개요 : todo의 id를 입력받아, 일치하는 todo 아이템의 isDone을 반대로 변경
 * 2022.12.16 : 최초작성
 *
 * @param {*} payload
 * @returns
 */
export const switchTodo = (payload) => {
  return {
    type: SWITCH_TODO,
    payload,
  };
};

// initial states
const initialState = [
  {
    id: uuidv4(),
    title: "리액트 공부하기",
    contents: "빨리빨리 암기하기",
    isDone: false,
  },
  {
    id: uuidv4(),
    title: "스프링 공부하기",
    contents: "인강 열심히 들어보기!!",
    isDone: true,
  },
  {
    id: uuidv4(),
    title: "데이트",
    contents: "홍대입구역에서 3시까지",
    isDone: false,
  },
];

// reducers
const todos = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO: // 기존의 배열에 입력받은 객체를 더함
      return [...state, action.payload];
    case REMOVE_TODO: // 기존의 배열에서 입력받은 id의 객체를 제거(filter)
      return state.filter((item) => item.id !== action.payload);
    case SWITCH_TODO: // 기존의 배열에서 입력받은 id에 해당하는 것만 isDone을 반대로 변경(아니면 그대로 반환)
      return state.map((item) => {
        if (item.id === action.payload) {
          return { ...item, isDone: !item.isDone };
        } else {
          return item;
        }
      });
    default:
      return state;
  }
};

 
export default todos;

리덕스 툴킷 코드

initialState/

const initialState = [
  {
    id: uuidv4(),
    title: "리액트 공부하기",
    contents: "빨리빨리 암기하기",
    isDone: false,
  },
  {
    id: uuidv4(),
    title: "스프링 공부하기",
    contents: "인강 열심히 들어보기!!",
    isDone: true,
  },
  {
    id: uuidv4(),
    title: "데이트",
    contents: "홍대입구역에서 3시까지",
    isDone: false,
  },
];

slice / 
  
export const todosSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {
    addTodo: (state, action) => {
      console.log(state);
      console.log(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;
        }
      });
    },
  },
});

export const { addTodo, removeTodo, switchTodo } = todosSlice.actions;
export default todosSlice.reducer;