我要评论本文介绍了react、redux、react-redux之间的关系，分享给大家，也给自己留个笔记，具体如下：
一些小型项目，只使用 react 完全够用了，数据管理使用props、state即可，那什么时候需要引入redux呢？ 当渲染一个组件的数据是通过props从父组件中获取时，通常情况下是 a --> b，但随着业务复杂度的增加，有可能是这样的：a --> b --> c --> d --> e，e需要的数据需要从a那里通过props传递过来，以及对应的 e --> a逆向传递callback。组件bcd是不需要这些数据的，但是又必须经由它们来传递，这确实有点不爽，而且传递的props以及callback对bcd组件的复用也会造成影响。或者兄弟组件之间想要共享某些数据，也不是很方便传递、获取等。诸如此类的情况，就有必要引入redux了。
其实 a --> b --> c --> d --> e 这种情况，react不使用props层层传递也是能拿到数据的，使用context即可。后面要讲到的react-redux就是通过context让各个子组件拿到store中的数据的。
其实我们只是想找个地方存放一些共享数据而已，大家都可以获取到，也都可以进行修改，仅此而已。 那放在一个全部变量里面行不行？行，当然行，但是太不优雅，也不安全，因为是全局变量嘛，谁都能访问、谁都能修改，有可能一不小心被哪个小伙伴覆盖了也说不定。那全局变量不行就用私有变量呗，私有变量、不能轻易被修改，是不是立马就想到闭包了...
现在要写这样一个函数，其满足：
- 存放一个数据对象
- 外界能访问到这个数据
- 外界也能修改这个数据
- 当数据有变化的时候，通知订阅者
function createstore(reducer, initialstate) {
// currentstate就是那个数据
let currentstate = initialstate;
let listener = () => {};
function getstate() {
return currentstate;
}
function dispatch(action) {
currentstate = reducer(currentstate, action); // 更新数据
listener(); // 执行订阅函数
return action;
}
function subscribe(newlistener) {
listener = newlistener;
// 取消订阅函数
return function unsubscribe() {
listener = () => {};
};
}
return {
getstate,
dispatch,
subscribe
};
}
const store = createstore(reducer);
store.getstate(); // 获取数据
store.dispatch({type: 'add_todo'}); // 更新数据
store.subscribe(() => {/* update ui */}); // 注册订阅函数
更新数据执行的步骤：
- what：想干什么 --- dispatch(action)
- how：怎么干，干的结果 --- reducer(oldstate, action) => newstate
- then?：重新执行订阅函数（比如重新渲染ui等）
这样就实现了一个store，提供一个数据存储中心，可以供外部访问、修改等，这就是redux的主要思想。 所以，redux确实和react没有什么本质关系，redux可以结合其他库正常使用。只不过redux这种数据管理方式，跟react的数据驱动视图理念很合拍，它俩结合在一起，开发非常便利。
现在既然有了一个安全的地方存取数据，怎么结合到react里面呢？ 我们可以在应用初始化的时候，创建一个window.store = createstore(reducer)，然后在需要的地方通过store.getstate()去获取数据，通过store.dispatch去更新数据，通过store.subscribe去订阅数据变化然后进行setstate...如果很多地方都这样做一遍，实在是不堪其重，而且，还是没有避免掉全局变量的不优雅。
由于全局变量有诸多的缺点，那就换个思路，把store直接集成到react应用的顶层props里面，只要各个子组件能访问到顶层props就行了，比如这样：
<topwrapcomponent store={store}>
<app />
</topwrapcomponent>,
react恰好提供了这么一个钩子，context，用法很简单，看一下官方demo就明了。现在各个子组件已经能够轻易地访问到store了，接下来就是子组件把store中用到的数据取出来、修改、以及订阅更新ui等。每个子组件都需要这样做一遍，显然，肯定有更便利的方法：。通过高阶组件把store.getstate()、store.dispatch、store.subscribe封装起来，子组件对store就无感知了，子组件正常使用props获取数据以及正常使用callback触发回调，相当于没有store存在一样。
下面是这个高阶组件的大致实现：
function connect(mapstatetoprops, mapdispatchtoprops) {
return function(wrappedcomponent) {
class connect extends react.component {
componentdidmount() {
// 组件加载完成后订阅store变化，如果store有变化则更新ui
this.unsubscribe = this.context.store.subscribe(this.handlestorechange.bind(this));
}
componentwillunmount() {
// 组件销毁后，取消订阅事件
this.unsubscribe();
}
handlestorechange() {
// 更新ui
this.forceupdate();
}
render() {
return (
<wrappedcomponent
{...this.props}
{...mapstatetoprops(this.context.store.getstate())} // 参数是store里面的数据
{...mapdispatchtoprops(this.context.store.dispatch)} // 参数是store.dispatch
/>
);
}
}
connect.contexttypes = {
store: proptypes.object
};
return connect;
};
}
使用connect的时候，我们知道要写一些样板化的代码，比如mapstatetoprops、mapdispatchtoprops这两个函数：
const mapstatetoprops = state => {
return {
count: state.count
};
};
const mapdispatchtoprops = dispatch => {
return {
dispatch
};
};
export default connect(mapstatetoprops, mapdispatchtoprops)(child);
// 上述代码执行之后，可以看到connect函数里面的
<wrappedcomponent
{...this.props}
{...mapstatetoprops(this.context.store.getstate())}
{...mapdispatchtoprops(this.context.store.dispatch)}
/>
// 就变成了
<wrappedcomponent
{...this.props}
{count: store.getstate().count}
{dispatch: store.dispatch}
/>
// 这样，子组件child的props里面就多了count和dispatch两个属性
// count可以用来渲染ui，dispatch可以用来触发回调
so，这样就ok了？ok了。 通过一个闭包生成一个数据中心store，然后把这个store绑定到react的顶层props里面，子组件通过hoc建立与顶层props.store的联系，进而获取数据、修改数据、更新ui。 这里主要讲了一下三者怎么窜在一起的，如果想了解更高级的功能，比如redux中间件、reducer拆分、connect的其他参数等，可以去看一下对应的源码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论