使用React和Redux构建一个简单的待办事项应用

npx create-react-app todo-app
cd todo-app

npm install redux react-redux redux-thunk

todo-app/
  src/
    actions/
      todoActions.js
    components/
      TodoForm.js
      TodoList.js
      TodoItem.js
    reducers/
      todoReducer.js
    store/
      configureStore.js
    App.js
    index.js

// actions/todoActions.js
export const ADD_TODO = 'ADD_TODO';
export const DELETE_TODO = 'DELETE_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
export function addTodo(text) {
  return { type: ADD_TODO, text };
}
export function deleteTodo(id) {
  return { type: DELETE_TODO, id };
}
export function toggleTodo(id) {
  return { type: TOGGLE_TODO, id };
}

// reducers/todoReducer.js
import { ADD_TODO, DELETE_TODO, TOGGLE_TODO } from '../actions/todoActions';
const initialState = [
  // 初始待办事项列表（可以为空）
];
export function todoReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return [...state, { id: Date.now(), text: action.text, completed: false }];
    case DELETE_TODO:
      return state.filter(todo => todo.id !== action.id);
    case TOGGLE_TODO:
      return state.map(todo =>
        todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
      );
    default:
      return state;
  }
}

// store/configureStore.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { todoReducer } from '../reducers/todoReducer';
const store = createStore(todoReducer, applyMiddleware(thunk));
export default store;

// components/TodoForm.js
import React from 'react';
import { connect } from 'react-redux';
import { addTodo } from '../actions/todoActions';
function TodoForm({ addTodo }) {
  const handleSubmit = (e) => {
    e.preventDefault();
    const text = e.target.elements.text.value.trim();
    if (text) {
      addTodo(text);
      e.target.elements.text.value = '';
    }
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="text" placeholder="Add todo" />
      <button type="submit">Add</button>
    </form>
  );
}
export default connect(null, { addTodo })(TodoForm);

// components/TodoList.js
import React from 'react';
import { connect } from 'react-redux';
import TodoItem from './TodoItem';
import { deleteTodo, toggleTodo } from '../actions/todoActions';
function TodoList({ todos, deleteTodo, toggleTodo }) {
  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem
          key={todo.id}
          todo={todo}
          onDelete={() => deleteTodo(todo.id)}
          onToggle={() => toggleTodo(todo.id)}
        />
      ))}
    </ul>
  );
}
const mapStateToProps = (state) => ({
  todos: state,
});
export default connect(mapStateToProps, { deleteTodo, toggleTodo })(TodoList);

// components/TodoItem.js
import React from 'react';
function TodoItem({ todo, onDelete, onToggle }) {
  return (
    <li>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={onToggle}
      />
      {todo.text}
      <button onClick={onDelete}>Delete</button>
    </li>
  );
}
export default TodoItem;

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store/configureStore';
import TodoForm from './components/TodoForm';
import TodoList from './components/TodoList';
function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <h1>Todo App</h1>
        <TodoForm />
        <TodoList />
      </div>
    </Provider>
  );
}
export default App;

npm start