Reduxはどのように状態をmapStateToPropsに渡しますか？

Question

ReactとReduxの仕組みを理解しようとしていて、FuelSavingsPage.jsをthis example projectから探していました。 actionsはmapDispatchToPropsに入っていますが、がmapStateToPropsにどのように渡されているのか、にどのように渡されたのかはわかりません。dispatchこれはどうですか？

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を小道具として渡します。 mapDispatchToPropsとdispatchメソッドでも同じことが起こります。あなたは次の擬似コードでこれを想像することができます：

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