React Redux 7.2 快速入门指南

React Redux 7.2 快速入门指南

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

React Redux 是 React 应用中连接 Redux 状态管理库的官方绑定库。它允许 React 组件从 Redux store 中读取数据，并通过派发(dispatch) actions 来更新 store 中的数据。本文将带你快速了解如何在 React 项目中使用 React Redux 7.2 版本。

安装要求

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

• React 版本需要 16.8.3 或更高
• 需要同时安装 Redux 核心库

可以通过以下命令安装 React Redux：

npm install react-redux

或者使用 yarn：

yarn add react-redux

核心概念与基本用法

Provider 组件

React Redux 的核心是 <Provider> 组件，它使 Redux store 对整个应用可用。通常，你会在应用的根组件中这样使用它：

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

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 } from './actions';

function Counter({ count, increment, decrement }) {
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

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

const mapDispatchToProps = {
  increment,
  decrement
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

最佳实践建议

1. 组件分离：建议将组件分为容器组件(使用 connect)和展示组件，这有助于代码的维护和测试

2. 选择器函数：对于复杂的 state 映射，建议使用单独的选择器函数，可以提高性能并便于重用

3. 性能优化：connect 默认会进行浅比较来避免不必要的重新渲染，对于大型应用，可以考虑使用 reselect 库来创建记忆化的选择器

4. Hooks API：React Redux 7.1+ 提供了 Hooks API(如 useSelector 和 useDispatch)，在函数组件中使用更为简洁

常见问题

Q: 为什么我的组件没有在 state 更新时重新渲染？ A: 确保你的 mapStateToProps 函数返回的对象中包含组件依赖的所有 state 片段，并且你没有直接修改 state

Q: 如何在 connect 中访问组件的 ownProps？ A: mapStateToProps 和 mapDispatchToProps 都可以接收 ownProps 作为第二个参数

Q: 什么时候应该使用 connect？ A: 当组件需要访问 store 中的数据或需要派发 actions 时使用 connect，对于只接收 props 的简单组件则不需要

通过本文，你应该已经掌握了 React Redux 的基本使用方法。在实际项目中，合理使用 React Redux 可以有效地管理应用状态，使数据流更加清晰可预测。

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