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

[Samgao0312]

本文转载自网络，介绍了react、redux、react-redux之间的关系。

React

一些小型项目，只使用 React 完全够用了，数据管理使用props、state即可。

那什么时候需要引入Redux呢？

当项目业务变得越来越复杂，组件间的状态管理变得复杂且难以维护时，我们就需要用到Redux。

当渲染一个组件的数据是通过props从父组件中获取时，通常情况下是 A --> B，但随着业务复杂度的增加，有可能是这样的：A --> B --> C --> D --> E，E组件需要的数据需要从 A 那里通过 props 传递过来，以及对应的 E --> A逆向传递 callback。组件B、C、D是不需要这些数据的，但是又必须经由它们来传递，这确实有点不爽，而且传递的 props 以及 callback 对 BCD 组件的复用也会造成影响。或者兄弟组件之间想要共享某些数据，也不是很方便传递、获取等。诸如此类的情况，就有必要引入Redux了。

其实 A --> B --> C --> D --> E 这种情况，React 不使用 props 层层传递也是能拿到数据的，使用 Context 即可。后面要讲到的 react-redux 就是通过 Context 让各个子组件拿到store中的数据的。

Redux

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

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

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

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... 如果很多地方都这样做一遍，实在是不堪其重，而且，还是没有避免掉全局变量的不优雅。

React-Redux

为了方便在React 项目中使用 Redux，Redux 的作者封装了一个 React 专用的库 React-Redux。这个库是可以选用的。实际项目中，你应该权衡一下，是直接使用 Redux，还是使用 React-Redux。后者虽然提供了便利，但是需要掌握额外的 API，并且要遵守它的组件拆分规范。

由于全局变量有诸多的缺点，那就换个思路，把 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的其他参数等，可以去看一下对应的源码。

参考阅读

• redux和react-redux小记
• Redux 入门教程（三）：React-Redux 的用法
• react-redux 官方文档