实现React-Redux（1）

首先来回顾下之前学习的内容：

React: 组件化的UI界面处理方案；

React-Router: 根据地址匹配路由，最终渲染不同的组件；

Redux：处理数据以及数据变化的方案（主要用于处理共享数据）；

如果一个组件，仅用于渲染一个UI界面，而没有状态（通常是一个函数组件），该组件叫做展示组件。如果一个组件，仅用于提供数据，没有任何属于自己的UI界面，则该组件叫做容器组件，容器组件纯粹是为了给其他组件提供数据。

---

react-redux这个库的作用是连接redux和react，它核心是connect方法，这是一个高阶容器组件，它大致是做了这些事情：

• 获取整个仓库，通过映射函数拿到需要的值

• 建立redux仓库的监听，实时更新数据模型

• 将dispatch事件映射到组件上

connect

可以从以下代码知道connect大概是做了一件什么事：

//connect高阶容器组件
export default class CounterContainer extends React.Component {
    constructor(props) {
        super(props);
        // 从redux仓库中获取所有的状态
        this.state = mapStateToProps(store.getState());
        // 当仓库状态发生变化时，重新设置组件的状态，从而触发页面重新渲染
        store.subscribe(() => {
            this.setState(mapStateToProps(store.getState()))
        })
    }

    render() {
        // 将dispatch事件和状态传给子组件
        const eventHandlers = mapDispatchToProps(store.dispatch)
        return <Counter {...this.state} {...eventHandlers} />
    }
}

Provider

Provider组件没有任何UI界面，该组件的作用，是将redux的仓库放到一个上下文中，其结构非常简单。

import React from "react";
import ctx from './ctx';

export default function Provider(props) {
    return (
        <ctx.Provider value={props.store}>
           {props.children}
        </ctx.Provider>
    )
}