React Demo Two - TodoList 升级：任务管理新体验

2023-10-18 00:07:04

React Demo Two - TodoList 升级：任务管理新体验

作为一名热衷于前端开发的程序员，我一直在寻找新的方法来创建更强大、更用户友好的应用程序。最近，我发现了一个非常棒的框架——React，它能够帮助我轻松地构建出复杂的用户界面。同时，我还发现了Redux，它是一个非常强大的状态管理工具，能够帮助我轻松地管理应用程序的状态。

使用 React 和 Redux 构建 TodoList 应用

为了更好地理解 React 和 Redux 的使用，我决定创建一个简单的 TodoList 应用。这个应用将允许用户添加、编辑和删除任务，并能够实时更新任务列表。

项目结构

├── package.json
├── src
│   ├── App.js
│   ├── TodoList.js
│   ├── TodoForm.js
│   ├── store.js
│   ├── index.js
├── index.html

步骤 1：安装依赖项

首先，我需要安装 React、Redux 和其他一些依赖项。可以使用以下命令安装这些依赖项：

npm install --save react react-dom redux react-redux

步骤 2：创建 React 应用

接下来，我需要创建一个 React 应用。可以使用以下命令创建一个 React 应用：

npx create-react-app my-app

步骤 3：添加 Redux

现在，我需要将 Redux 添加到 React 应用中。可以使用以下命令将 Redux 添加到 React 应用中：

npm install --save redux-devtools-extension

步骤 4：创建 Redux store

接下来，我需要创建一个 Redux store。Redux store 是一个对象，它存储着应用程序的状态。可以使用以下代码创建一个 Redux store：

import { createStore } from 'redux';
import rootReducer from './reducers/index';

const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

export default store;

步骤 5：创建 React 组件

接下来，我需要创建一些 React 组件。这些组件将负责渲染应用程序的界面。可以使用以下代码创建这些组件：

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>TodoList</h1>
      <TodoList />
      <TodoForm />
    </div>
  );
};

const TodoList = () => {
  const todos = useSelector(state => state.todos);

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
};

const TodoForm = () => {
  const dispatch = useDispatch();

  const addTodo = (e) => {
    e.preventDefault();
    dispatch(addTodoAction(e.target.todo.value));
    e.target.reset();
  };

  return (
    <form onSubmit={addTodo}>
      <input type="text" name="todo" />
      <button type="submit">添加</button>
    </form>
  );
};

export default App;