Redux-React 示例

这是一个使用 Redux 和 React 实现的示例应用。Redux 是一个可预测的状态容器，用于管理应用中的状态和数据流。React 是一个用于构建用户界面的 JavaScript 库。

在这个示例中，我们将展示一个简单的待办事项列表应用。用户可以添加新的待办事项，完成已有的事项，并查看待办事项的列表。

技术栈

• Redux: 用于状态管理和数据流控制
• React: 用于构建用户界面
• Redux Toolkit: Redux 的官方工具集，简化了 Redux 的配置和使用
• React-Redux: Redux 和 React 的集成库，简化了在 React 中使用 Redux 的过程

示例功能

• 显示待办事项列表
• 添加新的待办事项
• 完成已有的待办事项

示例结构

Redux 相关

• actions/ 目录：包含所有的 Redux 动作（Actions）定义和创建函数
• reducers/ 目录：包含所有的 Redux 状态（Reducers）定义和处理函数
• store.js：创建 Redux 的 store 实例，并将 reducers 注入到 store 中

React 相关

• components/ 目录：包含所有的 React 组件
• App.js：应用的主组件，负责渲染整个应用的布局和逻辑

样式相关

• styles.css：应用的样式文件

如何运行示例

首先，确保您的机器上已安装了 Node.js 环境。

1. 克隆示例代码库到您的机器上：git clone https://github.com/example/redux-react-example.git
2. 进入项目目录：cd redux-react-example
3. 安装依赖：npm install
4. 启动应用：npm start

示例代码

// src/actions/todo.js

// 创建添加待办事项的动作
export const addTodo = (text) => ({
  type: 'ADD_TODO',
  payload: {
    id: Date.now(),
    text,
    completed: false,
  },
});

// 创建完成待办事项的动作
export const completeTodo = (id) => ({
  type: 'COMPLETE_TODO',
  payload: id,
});

// src/reducers/todo.js

// 处理添加待办事项的动作
export const todoReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    case 'COMPLETE_TODO':
      return state.map(todo => {
        if (todo.id === action.payload) {
          return { ...todo, completed: true };
        }
        return todo;
      });
    default:
      return state;
  }
};

// src/components/TodoList.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { completeTodo } from '../actions/todo';

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

  const handleComplete = (id) => {
    dispatch(completeTodo(id));
  };

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          <span className={todo.completed ? 'completed' : ''}>{todo.text}</span>
          <button onClick={() => handleComplete(todo.id)}>完成</button>
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

总结

通过这个示例，我们可以学习如何使用 Redux 和 React 来构建一个简单的待办事项列表应用。同时，我们也了解了 Redux 的基本概念和用法，以及 Redux 和 React 的集成方式。

希望这个示例对你理解和学习 Redux-React 相关知识有所帮助！