React-Redux 基础教程：从零实现待办事项应用-优快云博客

React-Redux 基础教程：从零实现待办事项应用

react-redux reduxjs/react-redux: React-Redux 是一个用于 React 的 Redux 绑定库，可以用于构建 React 应用程序和组件，支持多种 Redux 功能和工具，如 Redux，Redux-Thunk，Redux-DevTools 等。项目地址: https://gitcode.com/gh_mirrors/re/react-redux

前言

React-Redux 是 React 生态中最重要的状态管理工具之一。本文将带你从零开始，通过构建一个完整的待办事项应用(Todo App)，深入理解 React-Redux 的核心概念和使用方法。

应用概览

我们将构建的待办事项应用包含以下功能：

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

应用架构

React 组件结构

TodoApp：应用根组件，包含所有子组件
AddTodo：添加新事项的输入框和按钮
TodoList：待办事项列表
Todo：单个待办事项的展示和交互
VisibilityFilters：筛选控件

Redux 状态管理

Redux 部分按照官方推荐模式组织：

Store 结构：
- todos：包含 byIds（按ID索引的事项）和 allIds（所有事项ID数组）
- visibilityFilters：当前筛选条件（all/completed/incomplete）
Action Creators：
- addTodo：添加新事项
- toggleTodo：切换事项完成状态
- setFilter：设置筛选条件
Reducers：
- todos：处理事项的增改
- visibilityFilters：处理筛选条件变更
Selectors：
- 提供从store中获取和计算数据的函数

连接React与Redux

第一步：提供Store

使用Provider组件将Redux store提供给整个应用：

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

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

Provider使所有子组件都能访问到Redux store。

第二步：连接组件

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

mapStateToProps：将store状态映射到组件props
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，将addTodo action creator作为prop注入组件。

连接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中获取待办事项列表。

连接Todo组件

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

const Todo = ({ todo, toggleTodo }) => (
  // ... 渲染逻辑
)

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

连接VisibilityFilters组件

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)

connect的四种常见用法

根据组件需求，connect有四种常见调用方式：

不订阅store，不注入action creators：
```
connect()(Component)
```
组件将获得dispatch prop用于手动派发action
订阅store，不注入action creators：
```
connect(mapStateToProps)(Component)
```
组件将订阅store变化并接收dispatch prop
不订阅store，注入action creators：
```
connect(null, mapDispatchToProps)(Component)
```
组件将接收action creators作为props
订阅store并注入action creators：
```
connect(mapStateToProps, mapDispatchToProps)(Component)
```
完整连接方式，组件将订阅store并接收action creators