[TIL] 9주차 월요일. Redux toolkit 정리 (세팅)

1. 세팅

yarn 사용 시

yarn add @reduxjs/toolkit
yarn add react-redux
or 한번에
yarn add @reduxjs/toolkit react-redux

npm 사용 시

npm install @reduxjs/toolkit
npm install react-redux
or 한번에
npm install @reduxjs/toolkit react-redux

src 폴더 안에 -> redux 폴더 안에 -> config 폴더 안에 -> configStore.js 파일 생성
src 폴더 안에 -> redux 폴더 안에 -> slices 폴더 안에 -> 무슨Slice.js 파일 생성 (ex. counterSlice.js)

2. 코드 세팅

1. src/config/configStore.js

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({
  reducer: {},
});

export default store;

2. 전역 관리 해줄 부모 컴퍼넌트 (내 경우 App.js)

import React from 'react'
import store from "./redux/config/configStore.js";
import { Provider } from "react-redux";

function App() {
  return (
    <>
      <Provider store={store}>
        {" "}
        <h1>투두리스트 타임어택</h1>
        <TodoForm />
        <TodoList />
      </Provider>
    </>
  );
}

export default App;

3. src/redux/slices/todoSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = { todos: [] };

export const todoSlice = createSlice({
  name: "todo",
  initialState,
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload);
    },
    deleteTodo: (state, action) => {
      const { id } = action.payload;
      return state.filter((todo) => todo.id !== id);
    },
    changeIsDoneTodo: (state, action) => {
      const todo = state.todos.find((todo) => todo.id === action.payload);
      if (todo) {
        todo.isDone = !todo.isDone;
      }
    },
  },
});

export const { addTodo, deleteTodo, changeIsDoneTodo } = todoSlice.actions;

export default todoSlice.reducer;