从零构建任务管理平台：掌握Redux框架（上）

前端

2023-09-28 11:12:58

Redux简介

Redux是一个用于JavaScript应用程序的状态管理工具，它可以帮助我们管理应用程序中的状态，使代码更易于维护和扩展。Redux有以下几个优点：

状态集中管理，便于追踪和调试。
状态可预测，易于单元测试。
提供时间旅行功能，可以回溯和重做状态变化。

任务管理平台构建指南

我们将使用Redux构建一个简单但功能齐全的任务管理平台，该平台将具有以下功能：

添加任务
删除任务
编辑任务
标记任务为已完成或未完成
按状态过滤任务

1. 项目搭建

首先，我们需要创建一个新的React项目。你可以使用create-react-app工具，或者使用其他你喜欢的项目构建工具。

npx create-react-app task-manager

2. 安装Redux

接下来，我们需要安装Redux和相关的库。

npm install redux react-redux

3. 创建Store

Store是Redux的核心，它存储着应用程序的状态。我们需要创建一个store，并将它传递给React组件。

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 'DELETE_TASK':
      return {
        ...state,
        tasks: state.tasks.filter(task => task.id !== action.payload)
      };
    case 'EDIT_TASK':
      return {
        ...state,
        tasks: state.tasks.map(task => {
          if (task.id === action.payload.id) {
            return action.payload;
          }

          return task;
        })
      };
    case 'TOGGLE_TASK_STATUS':
      return {
        ...state,
        tasks: state.tasks.map(task => {
          if (task.id === action.payload) {
            return {
              ...task,
              completed: !task.completed
            };
          }

          return task;
        })
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

4. 使用Store

现在，我们需要在React组件中使用store。我们可以使用useSelector和useDispatch钩子来实现。

import { useSelector, useDispatch } from 'react-redux';

const TaskList = () => {
  const tasks = useSelector(state => state.tasks);
  const dispatch = useDispatch();

  const addTask = (task) => {
    dispatch({
      type: 'ADD_TASK',
      payload: task
    });
  };

  const deleteTask = (id) => {
    dispatch({
      type: 'DELETE_TASK',
      payload: id
    });
  };

  const editTask = (task) => {
    dispatch({
      type: 'EDIT_TASK',
      payload: task
    });
  };

  const toggleTaskStatus = (id) => {
    dispatch({
      type: 'TOGGLE_TASK_STATUS',
      payload: id
    });
  };

  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>
          <input type="checkbox" checked={task.completed} onChange={() => toggleTaskStatus(task.id)} />
          {task.name}
          <button onClick={() => editTask(task)}>编辑</button>
          <button onClick={() => deleteTask(task.id)}>删除</button>
        </li>
      ))}
    </ul>
  );
};

export default TaskList;