上一篇展示了 Redux 的基本使用, 可以看到 Redux 非常简单易用, 不限于 React, 也可以在 Angular,vue 等框架中使用, 只要需要 Redux 的设计思想的地方, 就可以使用它.
这篇主要讲解在 React 中使用 Redux, 首先是安装.
安装 React Redux
- yarn add redux
- yarn add react-redux
有两个概念:
1. 容器组件 (Container Components)
2. 展示组件 (Presentational Components)
展示组件
更关注数据展示, 所以会写一些 DOM 嵌套和 CSS
通常不依赖 Redux, 直接从 props 中获取数据
通常没有 state, 偶尔会用 state 来保存一些展示状态, 如 class 等
交互也通过 props 回调发起, 不直接发起 action
容器组件
通常作为数据源, 做数据分发工作
依赖 Redux
通过和 store 交互进行数据变更
通过 react-redux 生成
在我们的项目中, 一般来说, 会编写很多展示组件, 少量的容器组件来包裹这些展示组件.
接下来写一个简单的计数器应用, 先来划分容器组件和展示组件.
计数器有三个按钮, 加, 减, 重置; 一个展示区.
由于按钮既要触发 action, 又要负责展示, 所以需要做成混合组件.
先来编写展示组件, 就是显示一下当前计数.
- import React from 'react';
- const Counter = ({
- count
- }) => (
- <p > 当前计数为:<span style={{color: 'red'}}>count</span></p>
- )
- export default Counter;
一般来说, 容器组件就是通过 store.subscribe 传入回调, 订阅 store 的变化, 再去把值通过 props 传入各个组件中.
在 react-redux 中实现了 connect 方法, 它生成一个高阶组件, 就是前面提到的容器组件. 这个方法做了性能优化避免不必要的重复渲染, 建议使用该方法.
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
mapStateToProps 是一个 Function, 用来监听 Redux Store 的变化, 将 store 的值, 映射为对应的 props 属性.
- const mapStateToProps = ({count}) => {count};
- // 或者
- const mapStateToProps2 = (state) => {
- count: state.count
- }
接下来生成一个容器组件.
- import { connect } from 'react-redux';
- const ConnectCounter = connect(
- mapStateToProps
- )(Counter);
- export default ConnectCounter;
接下来是按钮组件, 按钮组件既需要展示, 又有数据交互, 做成混合组件.
由于, 需要 dispatch, 所以需要给 connect 传入第二个参数.
mapDispatchToProps 可以是 Object 或者 Function. 用来将 dispatch 映射到 props 上.
- const mapDispatchToProps = dispatch => {
- return {
- plus: () => dispatch({
- type: 'PLUS'
- })
- }
- }
- // 或者结合上篇提到的 bindActionCreators 合成一个对象
- function plus() {
- return {
- type: "PLUS"
- };
- }
- function minus() {
- return {
- type: "MINUS"
- };
- }
- const mapDispatchToProps2 = dispatch => {
- return bindActionCreators({ plus, minus }, dispatch)
- }
- import React from 'react';
- let Button = ({plus, minus}) => {
- return (
- <>
- <button onClick={plus}>{'plus'}</button>
- <button onClick={minus}>{'minus'}</button>
- </>
- )
- };
- Button = connect(()=>{}, mapDispatchToProps2)(Button);
- export default Button;
最后, 提供一个 Provider 用来提供全局 store. 完整例子在这里 - codesandbox https://codesandbox.io/s/r46w78292o .
来源: https://www.cnblogs.com/liuyongjia/p/9807525.html