在我的主页中,我有几个小部件需要从异步操作返回数据。在每个组件中,我都是这样调度动作的:
componentDidMount() {
this.props.dispatch(homepageActions.getUpcomingTrips());
}
但是,当我以同样的方式连接第二个小部件时,收到TypeError: data.upcoming_hikes is undefined
错误。查看我的状态后,看来我的数据正在“被覆盖”,因为这些数据都在同一时间被调用。
查看Redux开发工具,可以依次看到HOMEPAGE_CURRENT_PACK_REQUEST,HOMEPAGE_UPCOMING_TRIPS_REQUEST,HOMEPAGE_UPCOMING_TRIPS_SUCCESS和HOMEPAGE_CURRENT_PACK_REQUEST。我的数据看起来像这样:
HOMEPAGE_UPCOMING_TRIPS_SUCCESS:
HOMEPAGE_CURRENT_PACK_SUCCESS:
在我看来,数据对象正在被覆盖?
我的减速器是这样写的:
import { homepageConstants } from '../_constants';
const initialState = {
data: {},
loading: true,
error: null,
}
export function homepage(state = initialState, action) {
console.log('action: ', action);
// current pack widget reducer
switch (action.type) {
case homepageConstants.CURRENT_PACK_REQUEST:
return {
...state,
data : {},
loading: true,
};
case homepageConstants.CURRENT_PACK_SUCCESS:
return {
...state,
data : action.data,
loading: false,
};
case homepageConstants.CURRENT_PACK_FAILURE:
return {
...state,
error: action.error,
};
// total miles widget reducer
case homepageConstants.TOTAL_MILES_REQUEST:
return {
...state,
data : {},
loading: true,
};
case homepageConstants.TOTAL_MILES_SUCCESS:
return {
...state,
data : action.data,
loading: false,
};
case homepageConstants.TOTAL_MILES_FAILURE:
return {
...state,
error: action.error,
};
// upcoming trips widget reducer
case homepageConstants.UPCOMING_TRIPS_REQUEST:
return {
...state,
data: {},
loading: true,
};
case homepageConstants.UPCOMING_TRIPS_SUCCESS:
return {
...state,
data: action.data,
loading: false,
};
case homepageConstants.UPCOMING_TRIPS_FAILURE:
return {
...state,
error: action.error,
};
default:
return state;
}
}
如果我的猜测是正确的,那就是数据将被覆盖(因为这是每个化简器案例中该键的名称,那么我应该如何处理呢?是否有更好的方法来处理这种在页面加载时的多重调度?
答案 0 :(得分:1)
您有两个选择。
action.data
。在这种方法中,您必须修改访问元素的方式。{
...state,
...action.data,
}
data
和action.data
并存储在data
中。{
...state,
data: {
...state.data,
...action.data,
},
}
这两个都可以解决您的问题,