react-redux 入门

React Redux 是一个为 Redux 提供 React 绑定的库。

了解 Redux 存储的 React 组件称为容器智能组件高阶组件(HOC)。要使用 Redux,这些组件需要:

  • 订阅商店以获取 Redux 商店的更新
  • 派遣行动

手动执行此操作意味着在 React 容器中使用 store.subscribestore.dispatch(action)

React Redux 通过 connect 函数简化了 Redux 存储和 React 容器组件之间的绑定,该函数将 Redux 状态属性和 Action 创建者映射到组件的 props。

connect 是一个创建更高阶组件的函数。Connect 接受 3 个函数(mapStateToPropsmapDispatchToPropsmergeProps)并返回一个容器组件,它包装原始组件以使其成为连接组件:

import { connect } from 'react-redux';

const Customers = { ... };
const mapStateToProps = (state) => { ... }
const mapDispatchToProps = (dispatch) => { ... }

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

有关完整示例,请参阅示例部分。

由于所有容器组件都需要访问 Redux 存储,因此推荐的方法是使用 React Redux 的特殊 <Provider> 组件,它将存储传递给所有子组件(在内部使用 React 上下文)。

官方文档: http//redux.js.org/docs/basics/UsageWithReact.html

GitHub 回购: https//github.com/reactjs/react-redux