所以我有一个Action,它从休息中获取一些数据。在组件中,我需要来自fetch的这些数据,这是在商店中设置的。
我使用此数据,然后在someFunc(this.props.data)
中使用componentDidMount()
。之后我将someFunc
的返回值赋予另一个Action,它对此数据执行某些操作并将其设置为存储。
我唯一的想法是,将someFunc
作为回调给予Action,并在获取第一个数据后立即调用它。所以我在一次行动中派遣了2人。
我希望你们明白我的意思。有更好的方法吗?
在Component1中,我调度一个Action,它将所需的数据加载到商店。在Component2中,我调度另一个Action,它从someFunc
函数获取其值。但someFunc
从第一个Action获取数据,因此当我调用someFunc
时数据未定义,因为尚未在商店中设置数据。
更清楚了吗?
componentDidMount(){
this.props.dataLoadAction() //action for the fetch i told
}
const mapDispatchToProps = (dispatch) => {
return {
dataLoadAction: () => {
dispatch(dataLoadAction())
}
}
};
export default connect(null, mapDispatchToProps)(Component1);
componentDidMount(){
this.props.changeDataAction(this.someFunc(this.props.data))
}
render(){
return (
<div>
{this.props.otherData}
</div>
)
}
const mapStateToProps = (state) => {
return {
otherData: state.someReducer.otherData,
data: state.someReducer.data,
}
};
const mapDispatchToProps = (dispatch) => {
return {
changeDataAction: (changedData) => {
dispatch(changeDataAction(changedData))
}
}
};
export default connect(mapStateToProps, mapDispatchToProps)(Component2);
export function dataLoadAction(){
return dispatch => {
HttpRequest.getJson("some url", json => {
dispatch(
{
type: 'DATA_LOADED',
payload: {
data: json
}
}
)
});
});
};
}
export function changeDataAction(changedData){
return dispatch => {
dispatch(
{
type: 'LOAD_CHANGEDDATA',
payload: mappedVis
}
)
};
}