1. 将原来的 mapStateToDispatch 中的函数提取出来,放在组件中,
如原来的:
function mapStateToProps(state, ownProps) { return { hasMore:state.getIn(['tabs','hasMore']), } } function mapDispatchToProps(dispatch) { return { addTabList:(id,page,tabIndex) => { dispatch(actionCreators.addTabList(id,page,tabIndex)); //在actionCreator中使用dispatch发送 } } } export default connect(mapStateToProps, mapDispatchToProps)(Main);
改为:也就是所有的dispatch 放在actionCreator中
addTabList(id,page,tabIndex){
actionCreators.addTabList(id,page,tabIndex);
}
export default connect(mapStateToProps, null)(Main);
对应的actionCreator:
原来是:
export const addTabList = (cardId,page,tabIndex) => { let currpage = page +1 ; return(dispatch)=>{ dispatch(changeLoading(true)); API.requestRightList(cardId,currpage,tabIndex).then(function (response) { dispatch(addList(response.result,currpage)); dispatch(changeLoading(false)); }) } };
改为:异步await 去掉 return dispatch ,引入store 使用 store.dispatch (原来是store在最外层组件中引入,则每个子组件都可以使用dispatch ,现在是把dispatch放在了actionCreator,所以要引入store)
若没有 请求其他接口的,只是单纯的派发数据:
import store from '../../../store';
export const changeFlag = () => {
store.dispatch({
type: actionType.CHANGE_MORE_FLAG
})
}
否则的话:
export const addTabList = async(cardId,page,tabIndex) => { let currpage = page +1 ; store.dispatch(changeLoading(true)); let response = await API.requestRightList(cardId,currpage,tabIndex); store.dispatch(addList(response.result,currpage)); store.dispatch(changeLoading(false)); };