React-Redux 基础教程：构建待办事项应用

React-Redux 基础教程：构建待办事项应用

react-redux 项目地址: https://gitcode.com/gh_mirrors/rea/react-redux

前言

React-Redux 是 React 生态中连接 Redux 状态管理库的核心工具。本文将带你通过构建一个待办事项应用，掌握 React-Redux 的核心概念和使用方法。

项目概述

我们将创建一个具有以下功能的待办事项应用：

• 添加新待办事项
• 标记事项为已完成/未完成
• 按状态筛选事项（全部/已完成/未完成）

应用架构

React 组件结构

1. TodoApp：应用根组件
2. AddTodo：添加新事项的输入框和按钮
3. TodoList：待办事项列表容器
4. Todo：单个待办事项展示组件
5. VisibilityFilters：筛选器组件

Redux 状态设计

1. todos：存储所有待办事项
   • byIds：以 ID 为键的对象映射
   • allIds：包含所有 ID 的数组
2. visibilityFilters：当前筛选条件（all/completed/incomplete）

核心实现步骤

1. 提供 Store

首先需要让整个应用能够访问 Redux store：

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

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

Provider 组件使 store 对所有子组件可用，而不需要显式传递。

2. 连接组件

使用 connect 函数连接组件与 Redux store。connect 接收两个主要参数：

1. mapStateToProps：将 state 映射为组件 props
2. mapDispatchToProps：将 action creators 映射为组件 props

连接 AddTodo 组件

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

class AddTodo extends React.Component {
  handleAddTodo = () => {
    this.props.addTodo(this.state.input);
    this.setState({ input: '' });
  };
  
  // ... 其他实现
}

export default connect(null, { addTodo })(AddTodo);

这里我们只提供了 mapDispatchToProps，因为组件不需要读取 store 状态。

连接 TodoList 组件

import { connect } from 'react-redux';
import { getTodos } from '../redux/selectors';

const TodoList = ({ todos }) => (
  // ... 渲染逻辑
);

const mapStateToProps = state => ({
  todos: getTodos(state)
});

export default connect(mapStateToProps)(TodoList);

使用 selector 函数从 store 中获取所需数据。

3. 实现交互功能

切换待办事项状态

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

const Todo = ({ todo, toggleTodo }) => (
  <div onClick={() => toggleTodo(todo.id)}>
    {todo.content}
  </div>
);

export default connect(null, { toggleTodo })(Todo);

实现筛选功能

// VisibilityFilters.js
import { connect } from 'react-redux';
import { setFilter } from '../redux/actions';

const VisibilityFilters = ({ activeFilter, setFilter }) => (
  // ... 渲染逻辑
);

const mapStateToProps = state => ({
  activeFilter: state.visibilityFilter
});

export default connect(mapStateToProps, { setFilter })(VisibilityFilters);

同时更新 TodoList 组件以响应筛选：

// selectors.js
export const getTodosByVisibilityFilter = (store, visibilityFilter) => {
  const allTodos = getTodos(store);
  switch(visibilityFilter) {
    case 'completed': 
      return allTodos.filter(todo => todo.completed);
    case 'incomplete':
      return allTodos.filter(todo => !todo.completed);
    default:
      return allTodos;
  }
};

// TodoList.js
const mapStateToProps = state => ({
  todos: getTodosByVisibilityFilter(state, state.visibilityFilter)
});

connect 函数的四种常见用法

1. 不订阅 store，不注入 action creators

   connect()(Component)
   

   仅提供 dispatch 方法

2. 订阅 store，不注入 action creators

   connect(mapStateToProps)(Component)
   

   将 state 映射为 props

3. 不订阅 store，注入 action creators

   connect(null, mapDispatchToProps)(Component)
   

   将 action creators 映射为 props

4. 订阅 store 并注入 action creators

   connect(mapStateToProps, mapDispatchToProps)(Component)
   

   完整用法

最佳实践建议

1. 使用 selector 函数：封装状态选择逻辑，便于维护和重用
2. 保持组件纯净：将业务逻辑放在 action creators 和 reducers 中
3. 合理划分连接：不是所有组件都需要连接 store，保持组件层级合理
4. 性能优化：对于复杂计算，考虑使用 Reselect 创建记忆化 selector

总结

通过这个待办事项应用的开发，我们学习了 React-Redux 的核心概念：

1. 使用 Provider 使 store 对整个应用可用
2. 通过 connect 连接组件与 Redux store
3. 使用 mapStateToProps 读取 store 状态
4. 使用 mapDispatchToProps 分发 actions
5. 合理设计 selector 函数组织状态查询逻辑

掌握这些基础知识后，你已经能够构建大多数 React-Redux 应用了。下一步可以探索更高级的主题如中间件、异步 action 处理等。

react-redux 项目地址: https://gitcode.com/gh_mirrors/rea/react-redux