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 。