javascript - Redux 如何将状态传递给 mapStateToProps？

Question

我试图了解 React 和 Redux 是如何工作的，我正在查看来自 this example project 的 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 方法也会发生同样的事情。你可以用下面的伪代码想象一下:

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