[React] Redux - toolkit 사용해보기 - todo

0. 들어가며, 

기본적으로 Redux와 Redux - Toolkit에 대한 이론을 공부한 뒤, 작성하였습니다. 

[React] Redux - 기본편

[React] Redux - toolkit편

 

1. 프로젝트 세팅

yarn add @reduxjs/toolkit react-redux

redux를 사용하기 위해서 toolkit과 react-redux만 추가로 설치해준다. 

 

2. 개발

1. Todos Reducer

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

const initialState = {
  todos: [],
};

export const todoSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {
    addTodos: (state, action) => {
      state.todos.push({ text: action.payload, done: false });
    },
    removeTodos: (state, action) => {
      state.todos.splice(action.payload, 1);
    },
    toggleTodos: (state, action) => {
      state.todos[action.payload].done = !state.todos[action.payload].done;
    },
  },
});

export const { addTodos, removeTodos, toggleTodos } = todoSlice.actions;
export default todoSlice.reducer;

추가, 삭제, 완료 기능을 만들기 위해서 createSlice를 사용했다. 

 

만약 예전 버전의 Redux를 사용했다면, 

const ADD_TODOS = 'todos/TODOS_ADD_TODOS';

export const addTodos = createAction(ADD_TODOS, ({key, value}) => ({ 
    key,
    value,
}));

// ...

const todos = handleActions({
    [ADD_TODOS]: // ...
})

더 길어지고 몇가지 과정을 거쳐야 했겠지만, 그부분을 하나로 간단하게 작업할 수 있다. 

 

또한 내부에 immer가 포함되어 있기 때문에 

state.todos[action.payload].done = !state.todos[action.payload].done;

불변 업데이트가 이루어진다. 

 

2. store 

import { configureStore } from "@reduxjs/toolkit";
import todos from "./todos";

export default configureStore({
  reducer: {
    todos,
  },
});

createStore 대신 사용하는 방식으로 reducer들을 자동으로 하나의 Root Reducer로 합쳐준다. 

 

3. Provider

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App";
import store from "./modules";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

만들어둔 store를 src/index.js에서 Provider를 통해서 적용한다. 

 

4. 화면에 나타내기

import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addTodos, removeTodos, toggleTodos } from "./modules/todos";

const TodoItem = ({ todo, onToggleHandler, onRemoveHandler }) => {
  return (
    <div>
      <input
        type="checkbox"
        onClick={() => onToggleHandler()}
        checked={todo.done}
        readOnly={true}
      />
      <span style={{ textDecoration: todo.done ? "line-through" : "none" }}>
        {todo.text}
      </span>
      <button onClick={() => onRemoveHandler()}>삭제</button>
    </div>
  );
};

function App() {
  const { todos } = useSelector((state) => state.todos);

  const [inputText, setInputText] = useState("");

  const dispatch = useDispatch();

  const onSubmitHandler = (e) => {
    e.preventDefault();
    dispatch(addTodos(inputText));
    setInputText("");
  };

  console.log(todos);

  return (
    <div>
      <form onSubmit={onSubmitHandler}>
        <input
          value={inputText}
          onChange={(e) => setInputText(e.target.value)}
        />
        <button type="submit">추가</button>
      </form>

      <hr />

      {todos?.map((data, idx) => {
        return (
          <TodoItem
            key={idx}
            todo={data}
            onToggleHandler={() => {
              dispatch(toggleTodos(idx));
            }}
            onRemoveHandler={() => dispatch(removeTodos(idx))}
          />
        );
      })}
    </div>
  );
}

export default App;

 

5. 깃허브

https://github.com/SeoJaeWan/react-redux-toolkit

GitHub - SeoJaeWan/react-redux-toolkit