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

最新推荐文章于 2025-06-05 16:56:22 发布

农爱宜

最新推荐文章于 2025-06-05 16:56:22 发布

阅读量346

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00023/article/details/148361677

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

前言

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

应用概览

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

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

项目结构

React 组件结构

TodoApp：应用根组件
AddTodo：添加新事项的输入组件
TodoList：待办事项列表组件
Todo：单个待办事项展示组件
VisibilityFilters：筛选控件组件

Redux 状态管理

Store 结构：
- todos：包含所有待办事项
  - byIds：以ID为键的对象映射
  - allIds：所有事项ID的数组
- visibilityFilters：当前筛选条件
Action Creators：
- addTodo：添加新事项
- toggleTodo：切换事项完成状态
- setFilter：设置筛选条件
Reducers：
- 处理上述action对应的状态变更

核心实现步骤

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对整个应用可用，这是React-Redux的基础。

2. 连接组件

React-Redux的核心是connect函数，它用于将React组件连接到Redux store。

connect基本用法

connect(mapStateToProps, mapDispatchToProps)(Component)

mapStateToProps：定义如何从store中提取组件需要的数据
mapDispatchToProps：定义如何将action creators注入为组件的props

3. 实现组件连接

添加待办事项(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)

这里我们只注入了addTodo action creator，不需要从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函数getTodos从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)

4. 筛选功能实现

我们需要更新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的四种常见用法

| 场景 | 不订阅store | 订阅store | |------|------------|----------| | 不注入action creators | connect()(Component) | connect(mapStateToProps)(Component) | | 注入action creators | connect(null, mapDispatchToProps)(Component) | connect(mapStateToProps, mapDispatchToProps)(Component) |

不订阅store且不注入action creators：
- 组件不会因store变化而重新渲染
- 接收props.dispatch用于手动dispatch action
订阅store但不注入action creators：
- 组件会因相关store数据变化而重新渲染
- 接收props.dispatch
不订阅store但注入action creators：
- 组件不会因store变化而重新渲染
- 接收注入的action creators作为props
订阅store且注入action creators：
- 组件会因相关store数据变化而重新渲染
- 接收注入的action creators作为props