React Redux 7.2 快速入门指南

React Redux 7.2 快速入门指南

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 Redux 是 Redux 官方提供的 React 绑定库，它允许 React 组件与 Redux 存储（store）进行交互。通过 React Redux，你的组件可以：

1. 从 Redux store 中读取数据
2. 向 store 分发（dispatch）action 来更新数据

React Redux 实现了高效的组件更新机制，确保只有在相关数据发生变化时才重新渲染组件。

安装要求

在开始使用 React Redux 7.2 之前，请确保你的项目满足以下要求：

• React 16.8.3 或更高版本
• 已安装 Redux（React Redux 需要与 Redux 配合使用）

安装命令

使用 npm 安装：

npm install react-redux

或者使用 yarn 安装：

yarn add react-redux

核心概念与基础用法

Provider 组件

<Provider> 是 React Redux 提供的一个高阶组件，它使 Redux store 对整个应用可用。通常，你应该在应用的根组件中使用它：

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import store from './store'
import App from './App'

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

Provider 使用了 React 的 Context 特性，使得任何嵌套的组件都能访问到 Redux store。

connect 函数

connect() 是 React Redux 提供的主要 API，用于将 React 组件连接到 Redux store。它接受两个可选参数：

1. mapStateToProps: 定义如何将 store 中的 state 映射到组件的 props
2. mapDispatchToProps: 定义如何将 action creators 映射到组件的 props

基本用法示例：

import { connect } from 'react-redux'
import { increment, decrement, reset } from './actionCreators'

function Counter({ counter, increment, decrement, reset }) {
  // 组件实现
}

const mapStateToProps = (state) => ({
  counter: state.counter
})

const mapDispatchToProps = {
  increment,
  decrement,
  reset
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

最佳实践建议

1. 合理划分容器组件和展示组件：

   • 容器组件负责与 Redux store 交互（使用 connect）
   • 展示组件只负责 UI 渲染，不直接与 Redux 交互

2. 选择性映射状态：

   • 只映射组件真正需要的状态，避免不必要的重新渲染

3. 使用对象简写形式的 mapDispatchToProps：

   • 如示例所示，直接传递 action creators 对象是最简洁的方式

4. 考虑使用 React Redux Hooks API：

   • React Redux 7.x 提供了 useSelector 和 useDispatch 等 Hook API
   • 在函数组件中，Hooks API 可能是更简洁的选择

常见问题解答

Q: 为什么我的组件没有在状态更新时重新渲染？

A: 确保你正确地返回了新的状态对象而不是修改原有状态。Redux 依赖不可变数据来检测变化。

Q: 什么时候应该使用 React Redux？

A: 当你的应用状态变得复杂，需要在多个组件间共享时，React Redux 是一个很好的选择。对于简单的局部状态，使用 React 的 useState 或 useReducer 可能更合适。

Q: connect 的性能如何？

A: React Redux 做了大量优化工作来最小化不必要的重新渲染。它会对 mapStateToProps 的结果进行浅比较，只有相关数据变化时才会触发更新。

通过本文，你应该已经掌握了 React Redux 的基本使用方法。在实际项目中，合理运用这些知识可以帮助你构建更可维护、更高效的 React 应用。

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