Redux 如何将状态传递给 mapStateToProps？

Question

我正在尝试了解 React 和 Redux 的工作原理，并且我正在查看 this example project 中的 FuelSavingsPage.js。我知道 actions 来自 mapDispatchToProps，但我不明白 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

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

Dan 不久前写了一个 connect 的简化版本来说明它使用的一般方法。参见 https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e 。

Answer 2

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

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

Redux 如何将状态传递给 mapStateToProps？

How is Redux passing state to mapStateToProps?

javascript

reactjs

redux

react-redux