React Redux 6.x 快速入门指南

React Redux 6.x 快速入门指南

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

什么是 React Redux？

React Redux 是 React 应用中连接 Redux 状态管理库的官方绑定工具。它允许 React 组件从 Redux store 中读取数据，并通过派发(dispatch) actions 来更新 store 中的数据状态。

核心概念

在深入使用之前，我们需要理解 React Redux 的两个核心概念：

1. Provider 组件：作为应用顶层容器，使 Redux store 对整个应用可用
2. connect 方法：高阶函数，用于连接 React 组件与 Redux store

环境准备

安装要求

• React 16.4 或更高版本
• 已配置好的 Redux store

安装步骤

使用 npm 或 yarn 安装 React Redux：

npm install react-redux
# 或
yarn add react-redux

注意：你需要同时安装 Redux 并在应用中配置好 Redux store。

基础用法

1. 设置 Provider

首先，在应用的最外层包裹 Provider 组件，并将 Redux store 作为 prop 传入：

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 使 store 对所有嵌套组件可用，无需显式传递。

2. 连接组件

使用 connect 函数将组件连接到 Redux store。connect 接受两个可选参数：

• mapStateToProps：定义如何将 store 状态映射到组件 props
• 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. 组件分离：将组件分为展示组件和容器组件。展示组件只负责UI，容器组件处理数据。

2. 选择性连接：只连接组件真正需要的那部分状态，避免不必要的重新渲染。

3. 记忆化选择器：对于复杂的派生数据，使用 reselect 等库创建记忆化选择器。

4. Action Creators：将 action 创建逻辑集中管理，保持组件简洁。

常见问题解答

Q: 为什么我的组件没有更新？ A: 确保 mapStateToProps 返回的对象包含组件依赖的所有状态，并且这些状态在 store 更新时确实发生了变化。

Q: 如何访问组件自身的 props？ A: mapStateToProps 的第二个参数 ownProps 可以访问组件自身的 props：

const mapStateToProps = (state, ownProps) => ({
  todo: state.todos[ownProps.id]
});

Q: 如何处理异步操作？ A: 结合使用 Redux Thunk 或 Redux Saga 等中间件来处理异步逻辑。

总结

React Redux 6.x 提供了简洁高效的方式将 React 组件与 Redux store 连接起来。通过 Provider 和 connect 的组合使用，你可以轻松实现组件与全局状态的交互。记住遵循最佳实践，保持组件的纯净性和可维护性。

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