redux-toolkit, redux-thunk

Redux Toolkit을 사용하여 비동기 상태 관리와 함께 간단한 to-do 리스트를 만들어 보겠습니다. Redux Toolkit은 Redux를 보다 간편하게 사용할 수 있도록 도와주는 라이브러리입니다.

1. 먼저, Redux Toolkit 및 관련 라이브러리를 설치합니다.

npm install @reduxjs/toolkit react-redux redux-thunk axios

2. Redux Toolkit 스토어를 설정합니다.

Redux Toolkit을 사용하여 스토어를 설정하고 Redux Thunk 미들웨어를 추가합니다.

// src/store.js

import { configureStore, createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

// 액션 타입 정의
const ADD_TODO = 'ADD_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';
const FETCH_TODOS = 'FETCH_TODOS';

// 비동기 액션 크리에이터
export const fetchTodos = createAsyncThunk(FETCH_TODOS, async () => {
  const response = await axios.get('/api/todos'); // Assuming you have an API endpoint for fetching todos
  return response.data;
});

// 초기 상태 설정
const initialState = {
  todos: [],
};

// 리듀서 정의
const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    addTodo: (state, action) => {
      state.todos.push({
        id: state.todos.length + 1,
        text: action.payload,
        completed: false,
      });
    },
    toggleTodo: (state, action) => {
      const todo = state.todos.find((todo) => todo.id === action.payload);
      if (todo) {
        todo.completed = !todo.completed;
      }
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchTodos.fulfilled, (state, action) => {
        state.todos = action.payload;
      });
  },
});

export const { addTodo, toggleTodo } = todosSlice.actions;

const rootReducer = {
  todos: todosSlice.reducer,
};

const store = configureStore({
  reducer: rootReducer,
  devTools: process.env.NODE_ENV !== 'production',
});

export default store;

3. React 컴포넌트를 작성합니다.

Redux Toolkit을 사용하여 to-do 리스트를 표시하고 상태를 변경하는 React 컴포넌트를 작성합니다.

// src/components/TodoList.js

import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addTodo, toggleTodo, fetchTodos } from '../store';

const TodoList = () => {
  const dispatch = useDispatch();
  const todos = useSelector((state) => state.todos.todos);
  const [newTodo, setNewTodo] = useState('');

  useEffect(() => {
    dispatch(fetchTodos());
  }, [dispatch]);

  const handleAddTodo = () => {
    if (newTodo.trim() === '') return;
    dispatch(addTodo(newTodo));
    setNewTodo('');
  };

  const handleToggleTodo = (id) => {
    dispatch(toggleTodo(id));
  };

  return (
    <div>
      <h1>Todo List</h1>
      <div>
        <input
          type="text"
          placeholder="할 일을 입력하세요"
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
        />
        <button onClick={handleAddTodo}>추가</button>
      </div>
      <ul>
        {todos.map((todo) => (
          <li
            key={todo.id}
            onClick={() => handleToggleTodo(todo.id)}
            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

4. 애플리케이션의 진입점을 설정합니다.

Redux Toolkit 스토어를 React 애플리케이션에 연결하고 TodoList 컴포넌트를 렌더링합니다.

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import TodoList from './components/TodoList';

ReactDOM.render(
  <Provider store={store}>
    <TodoList />
  </Provider>,
  document.getElementById('root')
);

이제 Redux Toolkit을 사용하여 비동기 상태 관리와 함께 간단한 to-do 리스트 애플리케이션이 준비되었습니다. 필요한 경우 스타일링 및 서버와의 통합을 위해 API 엔드포인트를 수정하고 추가 기능을 구현할 수 있습니다.