TODOList初体验，揭秘Redux的神奇魔力

2023-10-30 03:13:22

前言

在前端开发中，状态管理是一个至关重要的课题。Redux是一个流行的状态管理库，它可以帮助开发者轻松管理应用程序的状态。然而，对于初学者来说，Redux可能显得有些复杂和难以理解。因此，本教程将使用最基础的HTML、CSS、JavaScript和Redux来构建一个简单的TodoList应用程序，让您轻松入门Redux。

准备工作

在开始构建TodoList应用程序之前，您需要确保已经安装了以下工具：

Node.js
npm
React
Redux

如果您还没有安装这些工具，请按照官方文档进行安装。

搭建项目

创建一个新的React项目：

npx create-react-app todo-list

cd todo-list

安装Redux：

npm install redux react-redux

构建Redux Store

Redux Store是整个应用程序状态的唯一来源。在我们的TodoList应用程序中，我们将使用一个简单的Store来管理任务列表。

在src目录中创建一个名为store.js的文件，并添加以下代码：

import { createStore } from 'redux';

const initialState = {
  tasks: []
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TASK':
      return {
        ...state,
        tasks: [...state.tasks, action.payload]
      };

    case 'REMOVE_TASK':
      return {
        ...state,
        tasks: state.tasks.filter(task => task.id !== action.payload)
      };

    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

在上面的代码中，我们首先定义了初始状态，然后定义了一个Reducer函数来处理不同的动作。最后，我们创建了一个Redux Store并导出它。

创建TodoList组件

接下来，我们需要创建一个TodoList组件来显示任务列表。在src目录中创建一个名为TodoList.js的文件，并添加以下代码：

import React from 'react';
import { connect } from 'react-redux';

const TodoList = (props) => {
  return (
    <ul>
      {props.tasks.map((task) => (
        <li key={task.id}>{task.text}</li>
      ))}
    </ul>
  );
};

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

export default connect(mapStateToProps)(TodoList);

在上面的代码中，我们首先导入React和Redux相关的库。然后，我们定义了一个TodoList组件，它将通过props接收任务列表并将其渲染为一个无序列表。最后，我们使用connect函数将TodoList组件连接到Redux Store。

创建TaskForm组件

最后，我们需要创建一个TaskForm组件来添加新任务。在src目录中创建一个名为TaskForm.js的文件，并添加以下代码：

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';

const TaskForm = () => {
  const [text, setText] = useState('');
  const dispatch = useDispatch();

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

    const task = {
      id: Date.now(),
      text: text
    };

    dispatch({
      type: 'ADD_TASK',
      payload: task
    });

    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      <button type="submit">添加任务</button>
    </form>
  );
};

export default TaskForm;

在上面的代码中，我们首先导入React和Redux相关的库。然后，我们定义了一个TaskForm组件，它将使用useState来管理表单输入状态，并使用useDispatch来派发动作。最后，我们定义了一个表单提交处理函数来处理表单提交事件，并使用dispatch函数派发一个添加任务的动作。

在App.js中组装组件

现在，我们需要在App.js文件中组装这些组件。在src目录中的App.js文件中添加以下代码：

import React from 'react';
import TodoList from './TodoList';
import TaskForm from './TaskForm';

const App = () => {
  return (
    <div>
      <h1>我的待办事项列表</h1>
      <TaskForm />
      <TodoList />
    </div>
  );
};

export default App;