React+Redux实现简单的待办事项列表ToDoList

下面是React+Redux实现简单的待办事项列表ToDoList的完整攻略：

下面是React+Redux实现简单的待办事项列表ToDoList的完整攻略：

1. 准备工作

要使用React和Redux，需要运行以下命令安装它们：

npm install react react-dom redux react-redux

在项目中创建一个新的文件夹 src，然后在该文件夹中创建两个文件 index.js 和 index.css。

2. 创建基本的组件

首先，在 index.js 中创建一个 TodoList 组件，用于显示待办列表。这个组件应该包含一个文本框和一个添加按钮。当用户点击添加按钮时，应该将文本框中的文本添加到待办列表中。此外，还需要在页面上显示待办列表。

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    setTodos([...todos, { text }]);
    setText('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input value={text} onChange={(e) => setText(e.target.value)} />
        <button>Add</button>
      </form>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

3. 创建Redux Store

现在，需要在 index.js 中创建 Redux store。Redux store 是一个存储应用程序状态的容器。它是跨组件共享数据的核心部分。

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from './reducer';

const store = createStore(reducer);

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

4. 创建Reducer

Redux store 需要一个 reducer 来处理 state 的更新。reducer 是一个用于更新 state 的纯函数。它接收一个先前的状态和一个 action，然后返回一个新的状态。在这种情况下，reducer 接收一个 ADD_TODO action，并将新的 todo 添加到列表中。

const initialState = {
  todos: [],
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return { ...state, todos: [...state.todos, { text: action.text }] };
    default:
      return state;
  }
}

export default reducer;

5. 创建Action

接下来，在 actions.js 文件中定义 ADD_TODO action：

export const ADD_TODO = 'ADD_TODO';

export function addTodo(text) {
  return { type: ADD_TODO, text };
}

6. 在组件中使用Action

现在，需要将 addTodo action 和组件连接起来。这可以通过使用 connect() 函数来完成。

import { connect } from 'react-redux';
import { addTodo } from './actions';

function TodoList(props) {
  const { todos, addTodo } = props;

  const handleSubmit = (event) => {
    event.preventDefault();
    addTodo(text);
    setText('');
  };

  // ...
}

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

const mapDispatchToProps = { addTodo };

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

现在，可以使用 this.props.addTodo() 来将新的 todo 添加到列表中。

示例1

考虑如下要求：

1. 只能添加长度非0的待办事项；
2. 添加待办事项后，清空文本框中的内容。

修改 handleSubmit 函数，实现这个功能：

const handleSubmit = (event) => {
  event.preventDefault();

  if (text.trim().length === 0) {
    return;
  }

  addTodo(text.trim());
  setText('');
};

示例2

现在，考虑另一个要求：

1. 点击某个待办事项时可以进行删除操作。

为了实现这个功能，需要在 TODO item 上添加一个删除按钮。由于 Redux store 的更新无法在组件中直接触发，因此需要将 deleteTodo action 添加到 actions.js 文件中。

// actions.js
export const DELETE_TODO = 'DELETE_TODO';

export function deleteTodo(index) {
  return { type: DELETE_TODO, index };
}

接下来，在 TODO item 组件中添加一个删除按钮，并将 deleteTodo action 传递到组件中：

import { deleteTodo } from './actions';

// ...

return (
  <li>
    {todo.text}
    <button onClick={() => deleteTodo(index)}>Delete</button>
  </li>
);

以上内容就是React+Redux实现简单的待办事项列表ToDoList的完整攻略，希望能对你有所帮助！