React-redux
当一个 react 项目组件层级越来越深，页面越来越多的时候，数据在各个组件层级和页面之间传递的需求就会比较多，很多变量也需要做成可全局管理的。在这个时候，redux 和 react-redux 的使用很有必要了，能帮助我们很方便的进行项目全局性的数据管理。
相关概念
action
把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过store.dispatch()将 action 传到 store。
reducer
纯函数， Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，actions 只是描述了有事情发生这一个事实，并没有描述应用是怎样更新 state。
store
store 就是把 action 和 reducer 联系在一起的对象，store 本质上是一个状态树，保存所有对象的状态。任何 UI 组件都可以直接从 store 访问特定对象的状态
在 redux 中，所有的数据(如 state)被保存在一个 store 容器中，在一个应用程序中只能有一个 store 对象。当一个 store 接收到一个 action,它将把这个 action 代理给相关的 reducer。reducer 是一个纯函数，它可以查看之前的状态，执行一个 action 并且返回一个新的状态。
provider
provider 其实只是一个外层容器，它的作用就是通过配合 connect 来达到跨层级传递数据。使用时只需将 provider 定义为整个项目最外层的组件，并设置好 store，那么整个项目都可以直接获取这个 store。
connect
用于从 UI 组件生成容器组件
connect 的作用是连接 React 组件与 Redux store，它包在我们的容器组件的外一层，它接收上面 provider 提供的 store 里面的 state 和 dispatch，传给一个构造函数，返回一个对象，以属性形式传给我们的容器组件。
共有四个参数 mapStateToProps mapDispatchToProps mergeProps和options:
mapStateToProps的作用是将store里的state(数据源)绑定到组件的props中
mapDispatchToProps的作用是将store里的action(操作数据的方法)绑定到指定组件的props中
实现思路：
import { Component } from "react";
import React from "react";
import { PropTypes } from "prop-types";
const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent) => {
class Connect extends Component {
constructor() {
super();
this.state = {};
}
componentWillMount() {
this.unSubscribe = this.context.store.subscribe(() => {
this.setState(mapStateToProps(this.context.store.getState()));
});
}
componentWillUnmount() {
this.unSubscribe();
}
render() {
return (
<WrappedComponent
{...this.state}
{...mapDispatchToProps(this.context.store.dispatch)}
/>
);
}
}
Connect.contextTypes = {
store: PropTypes.object,
};
return Connect;
};
export default connect;
理解
- React-redux是连接React和Redux的库，同时使用了react和redux的api
- React-redux 主要是使用了react的context api来传递Redux的store
- provider的作用就是接收Redux store并将它放到context上传递下去。
- connect的作用是从redux store 中选取需要的属性传递给包裹的组件
- connect 会自己判断是否需要更新，判断的依据是需要的state是否已经发生了变化
- connect 在判断是否变化的时候使用的是浅比较，也就是只比较一层，所以在mapStateToProps和mapDispatchToProps中不要返回多层嵌套的对象
- 为了解决父组件和子组件各自独立依赖redux，破坏了react的父级--> 自己的更新流程，react-redux使用subscription类自己管理一套通知流程
- 只有连接到redux最顶级的组件才会注册到React store，其他子组件都会注册到最近父组件的subscription实例上
- 通知的时候从根组件开始依次通知自己的子组件，子组件接收到通知的时候，先更新自己在通知自己的子组件
解决的问题
单纯的redux只是一个状态机，是没有UI呈现的，react-redux作用是将redux的状态机和react的UI呈现绑定在一起，当你dispatch action改变state的时候，会自动更新页面。
参考文章
[每日一题] ---> 不断的丰富自己 ✌
