欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react系列(五)在React中使用Redux

程序员文章站 2022-07-02 14:11:29
上一篇展示了Redux的基本使用,可以看到Redux非常简单易用,不限于React,也可以在Angular、Vue等框架中使用,只要需要Redux的设计思想的地方,就可以使用它。 这篇主要讲解在React中使用Redux,首先是安装。 安装React Redux 有两个概念: 1.容器组件(Cont ......

上一篇展示了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。完整例子在。
感谢阅读。