摘要：简介是一个状态管理的库，由基础上开发出来，与的主要区别是只有一个，关于，后文会详述。这个函数接受四个参数，它们分别是，，和。之前在注册页面，如果没有满足相关条件，则触发的行为。具体定义了项目中触发的行为类别，通过属性来区别于不同的行为。
redux简介
redux是一个js状态管理的库，由flux基础上开发出来，与flux的主要区别是只有一个store，关于store，后文会详述。在各大框架中均可使用，当然各个框架也有自己再度封装的状态管理库，如angular的ngrx，vue的vuex，而本文主要介绍的是react的react-redux。
示例介绍本次演示的示例，是一个微信注册页面，主要想通过react-redux实现的功能是，当输入不合法的注册信息时，顶部出现错误提示信息，即：
通过路由进入主页面，主页面渲染的dom代码为：
render() {
// 这个组件是一个包裹组件，所有的路由跳转的页面都会以this.props.children的形式加载到本组件下
const {msg} = this.props;
return (
{msg.text}
{this.props.children}
);
}
可以看到主页面比更没有直接写入注册页面，而由错误提示部分加子路由入口组成，注册页面是通过子路由嵌套进来的，而又因为react的数据没有向上回溯的能力（即单项数据流），因此这里选择状态管理的方式去显示错误提示信息。
开讲react-rudex最初看文档的时候，有一种体验，就是各个模块（action,reducer,store）等等，都看明白了，但是具体想去完成功能的时候还是一脸懵逼，不知道如何下手，于是这次为了去更好的讲解示例，我决定反着来，先从示例入手，再去引出那些概念。
关联rudex和页面组件-connect从之前主页面的代码可以看到，错误信息的显示是由组件的props传进来的，而主页面是如何获取相关的props的呢，答案是通过一个connect的函数。
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
connect是react组件做状态管理的核心，它将组件和redux中的所有状态值连接起来。这个函数接受四个参数，它们分别是 mapStateToProps，mapDispatchToProps，mergeProps和options。
mapStateToProps(state, ownProps)第一个参数是获取redux仓库中的值的一个函数。为了方便快速理解，我们可以简单粗暴的认为他是js中getter，setter中的getter，这是一个用来从redux中获取值的函数，这个函数返回的值，可以在当前组件的props中拿到。
比如现在主页面需要知道，当前redux仓库中是否显示错误提示的相关信息时，有如下代码：
const mapStateToProps = (state) => {
return {
msg: state.tipMsg,//取reducer中的tipMsg
}
}
export default connect(mapStateToProps)(Main);
state就是redux中储存值的大对象，而现在需要的错误信息就是存储在tipMsg的字段当中。因为在主页面只会取值，而不会设置值，因此connect只需要这一个函数足够。
ownProps这里还可以穿第二个参数，第二个参数特指当前组件的props，可以用来做信息对比。本例没有用到。
mapDispatchToProps(dispatch, ownProps)如果说mapStateToProps是一个getter的话，那么mapDispatchToProps就是一个setter，他触发了redux的相关行为，使得rudex可以保存记录一些你想要记录改变的状态和值。
具体到本例中，触发redux行为的操作在注册页面，因此注册页面添加如下代码：
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({
showTip: showTip//第二个showTip是一个action
}, dispatch);
}
export default connect((state) => state, mapDispatchToProps)(Main);
可以看到当注册页面执行showTip的函数时，就会触发redux中的showTip的操作，这个操作是提前定义好的。这里有两个showTip，第一个是指当前页面的函数名，第二个是指redux中定义好的行为，这两个showTip没有必要的联系，只是作为一个关系映射，名字可以不一样。
mergeProps(stateProps, dispatchProps, ownProps)这个参数的作用是表示把redux中的props（即当中存储的值）和当前组件的props做合并，默认都是要合并的，可以忽略这个属性。
options一个配置项属性，可以做相关的配置。自行翻译吧~。
[options] (Object) If specified, further customizes the behavior of the connector.
[pure = true] (Boolean): If true, implements shouldComponentUpdate and shallowly compares the result of mergeProps, preventing unnecessary updates, assuming that the component is a “pure” component and does not rely on any input or state other than its props and the selected Redux store’s state. Defaults to true.
[withRef = false] (Boolean): If true, stores a ref to the wrapped component instance and makes it available via getWrappedInstance() method. Defaults to false.
store这个就是之前一直提到的redux的仓库。redux的管理的数据都存储在store中。
我们只需要知道，store就是一个存储仓库，react-redux只有一个store，所有的东西都存在这里，想要在react组件中用他首先需要去根页面把它注入进去。需要在根节点写入如下代码：
import React from "react";
import {render} from "react-dom"; // 渲染组件时需要
import {Provider} from "react-redux"; // react和redux连接的桥梁，就是这个Provider
import store from "./redux/store/store"; // 引入sotre
import route from "./router/route"; // 所有定义好的路由
// 创建根组件
render(
{route}
,
document.body.appendChild(document.createElement("div"))
);
这是链接redux，使组件可以访问仓库的基础。
actionexport const showTip = (item) => {
return {
type: "SHOW_TIP",
item
}
}
之前在注册页面，如果没有满足相关条件，则触发redux的行为。而这个行为就是action。action具体定义了项目中触发的行为类别，通过type属性来区别于不同的行为。对应到connect的函数参数中，就是mapDispatchToProps需要去save或者说change什么样的行为。
reducerconst tipMsg = (state = {text: "", show: false}, action) => {
switch (action.type) {
case "SHOW_TIP":
return Object.assign({}, {
text: action.item.text,
show: action.item.show
});
default:
return state;
}
}
一个纯函数，通过判断是什么样的行为，来对相关的state做更改，这中间是不含任何变量的，即只要确定输入，就能知道输出。在mapStateToProps这个取值函数中，取的也就是相关reducer中返回的值。
触发相关action后的主页控制台：
至此，就完成了react-redux对于父子组件的通信，由子组件向上推送信息至父组件，触发相关的操作。
项目地址：https://github.com/jiwenjiang...
（ps：注意此项目由yarn管理，而不是npm）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/88623.html
摘要：沿着管道有两组侦听器中间件和订阅。中间件是可以侦听传入的动作的函数，支持诸如，或侦听器之类的工具。将视为一个带有更新前更新后钩子的全局对象，以及能够以简单的方式合成新状态。应将两者视为一体，并且不再需要文件导出类型的字符串。 难道现在状态管理不是一个可以解决的问题吗?直观地说，开发人员似乎知道一个隐藏的事实:状态管理的使用似乎比需要的更困难。在本文中，我们将探讨一些你可能一直在问自己的...
摘要：深入之继承的多种方式和优缺点深入系列第十五篇，讲解各种继承方式和优缺点。对于解释型语言例如来说，通过词法分析语法分析语法树，就可以开始解释执行了。 JavaScript深入之继承的多种方式和优缺点 JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。 写在前面 本文讲解JavaScript各种继承方式和优缺点。 但是注意： 这篇文章更像是笔记，哎，再让我...
摘要：项目地址下载完项目然后即可基于的项目，主要是为了学习实战。数据都是固定的，从饿了么接口临时抓的，模拟了一个的异步数据延迟，感谢饿了么。详细信息可以看上面的官方文档，我这里就简单说一下我这个项目的应用。 react-ele-webapp 项目地址 ：https://github.com/kliuj/reac... run 下载完项目npm install然后npm run dev 即可 ...
摘要：简介创建的函数，返回一个对象，包含等方法合并多个中间件处理，在实际的前调用一系列中间件，类似于绑定和函数式编程中常见的方法，介绍官方提供的绑定库。 前言 在学习了React之后， 紧跟着而来的就是Redux了~ 在系统性的学习一个东西的时候， 了解其背景、设计以及解决了什么问题都是非常必要的。接下来记录的是， 我个人在学习Redux时的一些杂七杂八~ Redux是什么 通俗理解 h...
摘要：我现在写的这些是为了解决和这两个状态管理库之间的困惑。这甚至是危险的，因为这部分人将无法体验和这些库所要解决的问题。这肯定是要第一时间解决的问题。函数式编程是不断上升的范式，但对于大部分开发者来说是新奇的。规模持续增长的应 原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...
阅读 3292·2021-09-08 09:45
阅读 1254·2019-08-30 15:53
阅读 1526·2019-08-30 14:12
阅读 984·2019-08-29 17:01
阅读 2571·2019-08-29 15:35
阅读 395·2019-08-29 13:09
阅读 1969·2019-08-29 12:32
阅读 3087·2019-08-26 18:37
