redux, redux-saga todoList - chatGPT

Redux 및 Redux-Saga를 사용하여 간단한 to-do 리스트를 만들어 보겠습니다. Redux는 상태 관리 라이브러리이며, Redux-Saga는 비동기 작업을 처리하기 위한 미들웨어입니다.

1. 먼저, Redux 및 Redux-Saga를 설치합니다.

npm install redux react-redux redux-saga

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

Redux 스토어를 설정하고 Redux-Saga 미들웨어를 추가합니다.

// src/store.js

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { put, takeEvery, all } from 'redux-saga/effects';

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

// 액션 생성자 함수
export const addTodo = (text) => ({
  type: ADD_TODO,
  text,
});

export const toggleTodo = (id) => ({
  type: TOGGLE_TODO,
  id,
});

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

// 리듀서 정의
const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [
          ...state.todos,
          {
            id: state.todos.length + 1,
            text: action.text,
            completed: false,
          },
        ],
      };
    case TOGGLE_TODO:
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.id
            ? { ...todo, completed: !todo.completed }
            : todo
        ),
      };
    default:
      return state;
  }
};

// Redux-Saga 사가 함수
function* addTodoSaga(action) {
  yield put(addTodo(action.text));
}

// 사가 워커 함수
function* rootSaga() {
  yield all([takeEvery(ADD_TODO, addTodoSaga)]);
}

// 사가 미들웨어 생성
const sagaMiddleware = createSagaMiddleware();

// 스토어 생성
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));

// 사가 실행
sagaMiddleware.run(rootSaga);

export default store;

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

Redux 스토어와 상호작용하는 React 컴포넌트를 작성합니다.

// src/components/TodoList.js

import React, { useState } from 'react';
import { connect } from 'react-redux';
import { addTodo, toggleTodo } from '../store';

const TodoList = ({ todos, addTodo, toggleTodo }) => {
  const [newTodo, setNewTodo] = useState('');

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

  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={() => toggleTodo(todo.id)}
            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

const mapStateToProps = (state) => ({
  todos: state.todos,
});

const mapDispatchToProps = {
  addTodo,
  toggleTodo,
};

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

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

Redux 스토어를 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 및 Redux-Saga를 사용한 간단한 to-do 리스트 애플리케이션이 준비되었습니다. 필요한 경우 스타일링과 추가 기능을 구현하여 확장할 수 있습니다.