Redux如何将状态传递给mapStateToProps？

Question

我正在尝试理解React和Redux是如何工作的，而我正在查看此示例项目中的 FuelSavingsPage.js。 我得到mapDispatchToProps中的actions来源，但我不明白如何将state传递给mapStateToProps或如何dispatch传递给mapDispatchToProps 。 这是怎么回事？

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from '../actions/fuelSavingsActions';
import FuelSavingsForm from '../components/FuelSavingsForm';

export const FuelSavingsPage = (props) => {
  return (
    <FuelSavingsForm
      saveFuelSavings={props.actions.saveFuelSavings}
      calculateFuelSavings={props.actions.calculateFuelSavings}
      fuelSavings={props.fuelSavings}
    />
  );
};

FuelSavingsPage.propTypes = {
  actions: PropTypes.object.isRequired,
  fuelSavings: PropTypes.object.isRequired
};

function mapStateToProps(state) {
  return {
    fuelSavings: state.fuelSavings
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(FuelSavingsPage);

Answer 1

connect()函数中的所有魔法。 此函数调用mapStateToProps并将state作为prop传递。 mapDispatchToProps和dispatch方法mapDispatchToProps发生同样的事情。 您可以使用以下伪代码来设想：

function connect(mapStateToProps, mapDispatchToProps) {
    mapStateToProps(store.getState()) // just simple callback
    mapDispatchToProps(store.dispatch) // the same
}

Answer 2

React-Redux connect函数生成一个订阅商店的包装器组件。 该包装器组件在每次调度操作后调用store.getState() ，使用当前存储状态调用提供的mapStateToProps函数，并在必要时使用存储的dispatch函数调用mapDispatchToProps 。

Dan写了一段简化版本的connect ，以说明它使用的一般方法。 请参阅https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e 。