详解react、redux、react-redux之间的关系

本文介绍了react、redux、react-redux之间的关系，分享给大家，也给自己留个笔记，具体如下：

React

一些小型项目，只使用 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中的数据的。

Redux

其实我们只是想找个地方存放一些共享数据而已，大家都可以获取到，也都可以进行修改，仅此而已。 那放在一个全部变量里面行不行？行，当然行，但是太不优雅，也不安全，因为是全局变量嘛，谁都能访问、谁都能修改，有可能一不小心被哪个小伙伴覆盖了也说不定。那全局变量不行就用私有变量呗，私有变量、不能轻易被修改，是不是立马就想到闭包了...

现在要写这样一个函数，其满足：

存放一个数据对象 外界能访问到这个数据 外界也能修改这个数据 当数据有变化的时候，通知订阅者

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的数据驱动视图理念很合拍，它俩结合在一起，开发非常便利。