react系列（五）在React中使用Redux

上一篇展示了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。

感谢阅读。

巴特西

react系列（五）在React中使用Redux

安装React Redux

展示组件

容器组件

最新文章

热门文章