乐趣区

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

jiezi

文章首发于我的博客 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 中的数据传入组件的属性里，因而须要实现上面两件事：

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

因而 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 实现原理解说 第四讲
退出移动版