Redux如何將狀態傳遞給mapStateToProps？

我想了解React和Redux是如何工作的，並且我從this example project看FuelSavingsPage.js。我得到actions來自mapDispatchToProps，但我不明白如何state傳遞給mapStateToProps或dispatch如何傳遞給mapDispatchToProps。這是怎麼發生的？Redux如何將狀態傳遞給mapStateToProps？

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);

來源

2016-08-19 Tylerlee12

React-Redux connect函數生成一個訂閱商店的包裝器組件。該包裝組件在每次調度操作後調用store.getState()，用當前的存儲狀態調用提供的mapStateToProps函數，並在必要時調用mapDispatchToProps與商店的dispatch函數。

丹寫了一個簡化版本connect a回來說明它使用的一般方法。見https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e。

來源

2016-08-19 18:24:38 markerikson

所有魔術在connect()功能。這個函數調用mapStateToProps並通過state作爲道具。 mapDispatchToProps和dispatch方法也會發生同樣的情況。你可以用下面的僞代碼想象這個：

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

來源

2016-08-19 18:24:49 semanser

Redux如何將狀態傳遞給mapStateToProps？

回答

相關問題