react系列(五)在React中使用Redux 2019-07-22

上一篇展示了Redux的基本使用,可以看到Redux非常简单易用,不限于React,也可以在Angular、Vue等框架中使用,只要需要Redux的设计思想的地方,就可以使用它。这篇主要讲解在React中使用Redux,首先是安装。

安装React Redux

yarn add reduxyarn 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。感谢阅读。

Copyright © 2019 万家博官方网站 All Rights Reserved
高彦兵
地址:中国江西九江星子县横塘镇红星村羽绒工业园洼里况
全国统一热线:13501234264