redux进一步优化
生活随笔
收集整理的這篇文章主要介紹了
redux进一步优化
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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)); };?
轉載于:https://www.cnblogs.com/xiaozhumaopao/p/10567738.html
總結
以上是生活随笔為你收集整理的redux进一步优化的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python处理teradata数据库_
- 下一篇: mysql上k8s_通过搭建MySQL掌