javascript - 带操作的 redux 调用缩减器

Question

这是我的 reducer :

export default function dashboardReducer(state=initialState.alerts, action){
    switch(action.type){
        case constActions.GET_ALERTS_SUCCESS:
            return action.alerts;
        case constActions.GET_WL_STATISTICS_SUCCESS:
            return action.wlStatistics;
    default:
        return state;
    }
};

我的根 reducer :

const rootReducer = combineReducers({
    dashboard
});

在组件中，这是mapStateToProps:

function mapStateToProps(state, ownProps){
    return{
        alerts: state.dashboard
    };
}

现在我有 2 个操作 GET_ALERTS_SUCCESS 和 GET_WL_STATISTICS_SUCCESS。 在组件中，我有 actions.alerts 的属性，但是如何在组件中获取对 action.wlStatistics 的引用？我可以使用操作类型调用 reducer 吗？

Answer 1

您的dashboardReducer 要么返回下一个状态的“alerts”initialState 或“alerts”或“wlStatistics”。它应该返回一个具有这两个操作有效负载作为属性的对象:

const initialState = {
  alerts: null,
  wlStatistics: null
};

export default function dashboardReducer(state=initialState, action){
    switch(action.type){
        case constActions.GET_ALERTS_SUCCESS:
            return Object.assign({}, state, { action.alerts });
        case constActions.GET_WL_STATISTICS_SUCCESS:
            return Object.assign({}, state, { action.wlStatistics });
    default:
        return state;
    }
};

你的 Prop 现在将被映射为

this.props.alerts

和

this.props.wlStatistics

每当任一操作更新“dashboardReducer”中的状态时，您的组件将重新渲染/接收Props，并且 Prop 将使用新值进行更新