关于前端:miniredux-实现原理讲解-第二讲

文章首发于我的博客 https://github.com/mcuking/bl…

相干代码请查阅 https://github.com/mcuking/bl…

本讲次要解决如何在 react 中更优雅的应用 redux，即实现 react-redux

Provider

在实现 react-redux 之前，咱们首先须要理解 react 的 context 机制。当须要将某个数据设置为全局，即可应用 context 在父组件申明，这样其上面的所有子组件都能够获取到这个数据。

基于 context 机制，咱们定义一个 Provider，作为利用的一级组件，专门负责将传入的 store 放到 context 里，所有子组件均能够间接获取 store，并不渲染任何货色。

// Provider 负责将store放到context里，所有子组件均能够间接获取store
export class Provider extends Component {
  // 应用context须要应用propType进行校验
  static childContextTypes = {
    store: PropTypes.object
  };

  constructor(props, context) {
    super(props, context);
    this.store = props.store; // 将传进来的store作为自身的store进行治理
  }

  // 将传进来的store放入全局context，使得上面的所有子组件均可取得store
  getChildContext() {
    return { store: this.store };
  }

  render() {
    return this.props.children;
  }
}

对应业务代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from './mini-redux';
import { Provider } from './mini-react-redux';
import { counter } from './index.redux';
import App from './App';

const store = createStore(counter);
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

connect

connect 负责连贯组件，将 redux 中的数据传入组件的属性里，因而须要实现上面两件事：

负责接管一个组件，并将组件对应全局 state 里的一些数据放进去，返回一个新组件
数据变动时，可能告诉组件

因而 connect 自身是一个高阶组件，首先接管上面两个参数，而后再接管一个组件：

mapStateToProps，是一个函数，入参为全局 state，并返回全局 state 中组件须要的的数据，代码如下：

const mapStateToProps = state => {
  return {
    num: state
  };
};

mapDispatchToProps，是一个对象，对象外面为 action（用来扭转全局状态的对象）的生成函数，代码如下：

const mapDispatchToProps = {
  buyHouse,
  sellHouse
};

// action creator
export function buyHouse() {
  return { type: BUY_HOUSE };
}

export function sellHouse() {
  return { type: SELL_HOUSE };
}

第一步，咱们将 mapStateToProps 的返回值，即组件须要的全局状态 state 中的某个状态，以参数的模式传给新构建的组件，代码如下：

export const connect = (
  mapStateToProps = state => state,
  mapDispatchToProps = {}
) => WrapComponent => {
  // 高阶函数，间断两个箭头函数意味着嵌套两层函数
  return class ConnectComponent extends Component {
    // 应用context须要应用propType进行校验
    static contextTypes = {
      store: PropTypes.object
    };

    constructor(props, context) {
      super(props, context);
      this.state = {
        props: {}
      };
    }

    componentDidMount() {
      this.update();
    }

    // 获取mapStateToProps返回值，放入到this.state.props
    update() {
      const { store } = this.context; // 获取放在全局context的store

      const stateProps = mapStateToProps(store.getState());

      this.setState({
        props: {
          ...this.state.props,
          ...stateProps
        }
      });
    }

    render() {
      return <WrapComponent {...this.state.props} />;
    }
  };
};

第二步，咱们须要将 mapDispatchToProps 这个对象中批改全局状态的办法传入给组件，然而间接将相似 buyHouse 办法传给组件，并在组件中执行 buyHouse()办法并不能扭转全局状态。

联想到上一讲 redux 中，批改全局状态，须要应用 store 的 dispatch 办法，dispatch 对应代码如下：

function dispatch(action) {
  // reducer依据老的state和action计算新的state
  currentState = reducer(currentState, action);

  // 当全局状态变动时，执行传入的监听函数
  currentListeners.forEach(v => v());
  return action;
}

其中须要内部传入 action，即一个对象，例如{type: BUY_HOUSE}。因而咱们须要将 buyHouse 办法的返回值 action 对象，传给 store.dispatch 办法，执行后能力扭转全局状态。对应代码如下：

buyHouse = () => store.dispatch(buyHouse());

对此，咱们封装一个办法 bindActionCreators，入参为 mapDispatchToProps 和 store.dispatch，返回相似 buyHouse = () => store.dispatch(buyHouse())的办法的汇合，即应用 dispatch 将 actionCreator 的返回值包一层，代码如下：

// 将 buyHouse(...arg) 转换为 (...arg) => store.dispatch(buyHouse(...arg))
function bindActionCreator(creator, dispatch) {
  return (...arg) => dispatch(creator(...arg)); // 参数arg透传
}

// creators 示例 {buyHouse, sellHouse, buyHouseAsync}
export function bindActionCreators(creators, dispatch) {
  let bound = {};
  for (let v in creators) {
    bound[v] = bindActionCreator(creators[v], dispatch);
  }
  return bound;
}

因而，咱们就能够第一步的根底上，将 store.dispatch 包装后的 actionCreator 汇合对象，传给组件，代码如下：

export const connect = (
  mapStateToProps = state => state,
  mapDispatchToProps = {}
) => WrapComponent => {
  // 高阶函数，间断两个箭头函数意味着嵌套两层函数
  return class ConnectComponent extends Component {
    // 应用context须要应用propType进行校验
    static contextTypes = {
      store: PropTypes.object
    };

    constructor(props, context) {
      super(props, context);
      this.state = {
        props: {}
      };
    }

    componentDidMount() {
      const { store } = this.context;
      store.subscribe(() => this.update()); // 每当全局状态更新，均须要更新传入组件的状态和办法
      this.update();
    }

    // 获取mapStateToProps的返回值 和 mapDispatchToProps，放入到this.state.props
    update() {
      const { store } = this.context; // 获取放在全局context的store

      const stateProps = mapStateToProps(store.getState());

      // 办法不能间接传，因为须要dispatch
      // 例如间接执行addHouse()毫无意义，须要buyHouse = () => store.dispatch(addHouse())才有意义
      // 其实就应用diapatch将actionCreator包了一层
      const dispatchProps = bindActionCreators(
        mapDispatchToProps,
        store.dispatch
      );

      this.setState({
        props: {
          ...this.state.props,
          ...stateProps,
          ...dispatchProps
        }
      });
    }

    render() {
      return <WrapComponent {...this.state.props} />;
    }
  };
};

留神，除了将 dispatchProps 传给组件之外，下面代码还在组件的 componentDidMount 生命周期中，将 update 函数设置为监听函数，即

store.subscribe(() => this.update())

从而，每当全局状态发生变化，都会从新获取最新的传入组件的状态和办法，实现组件状态与全局状态同步的成果。

相干文章如下：

mini-redux 实现原理解说第一讲
mini-redux 实现原理解说第二讲
mini-redux 实现原理解说第三讲
mini-redux 实现原理解说第四讲

关于前端:miniredux-实现原理讲解-第二讲

Provider

connect

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:miniredux-实现原理讲解-第二讲

Provider

connect

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复