为什么 redux store 只获取最后一个 dispatch Action 的值

Question

我正在尝试在 redux 的 action 阶段进行 multi dispatch action:

这是我的代码：

export const get_data_time_slot_week = (params) => {
return async (dispatch) => {
    dispatch({
        type: common.CALL_API_REQUEST,
    });
    const res = await callAPI.post(TIME_SLOT_WEEK + GET, {
        params: { ...params },
    });

    if (res.status === 200 && res.data.code >= 0) {

//Here, I get new state of Selector timeSlotWeek
        dispatch({
            type: timeSlotWeek.GET_DATA_TIME_SLOT_WEEK_SUCCESS,
            payload: {
                data: [...res.data.data],
                dataPage: { ...res.data.dataPage },
                errCode: res.data.code,
            },
        });

//And here, I lost state of a Selector timeSlotWeek add get new state of Selector common
        dispatch({
            type: common.GET_FEEDBACK,
            payload: {
                msg: "__msg_can_not_to_server",
            },
        });
    }
};

};

为什么会这样？以及如何在我的代码中保持 timeSlotWeek 的状态与相同的流程？

这是我用 Redux 工具检查的结果

GET_DATA_TIME_SLOT_WEEK_SUCCESS     =>    data: { 0: {...}, 1{...} }
GET_FEEDBACK                        =>    data: {}
                                          msg: "new msg"

这是我的store.js

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import rootReducer from "./reducers";
import thunk from "redux-thunk";
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)));

export default store;

这是我的 {combineReducers}

import { combineReducers } from "redux";
import feedback from "./feedback.reducer";
import loadingReducer from "./loading.reducer";
import timeSlotWeek from "./timeSlotWeek.reducer";

const rootReducer = combineReducers({
    dataTimeSlotWeek: timeSlotWeek,
    loading: loadingReducer,
    feedback: feedback,
});

export default rootReducer;

感谢您的帮助

更新：问题解决：因为在我的 timeSlotWeek.reducer reducer 中有一个 default case，当我派发另一个 action 时，这个 case 会运行并使 timeSlotWeek 的状态变为 initState.

import { common, timeSlotWeek } from "../actions/constants";
const initState = {
    data: [],
};

    export default (state = initState, action) => {
        switch (action.type) {
            case timeSlotWeek.GET_DATA_TIME_SLOT_WEEK_SUCCESS:
                state = {
                    // Pass payload to this
                };
                break;
            default:
                state = { ...initState };
        }
        return state;
    };

我是这样修复的：

import { common, timeSlotWeek } from "../actions/constants";

const initState = {
    data: [],
};

export default (state = initState, action) => {
    switch (action.type) {
        case timeSlotWeek.GET_DATA_TIME_SLOT_WEEK_SUCCESS:
            state = {
                // Pass payload to this
            };
            break;
        **case common.CALL_API_FINISH:
            state = state;
            break;
        case common.GET_FEEDBACK:
            state = state;
            break;**
        default:
            state = { ...initState };
    }
    return state;
};

还有比我的方法更好的吗？感谢 cmt

Answer 1

默认的 reducer case 应该总是 return 当前状态对象。否则我想不出一个反例（虽然我看到一些教程在这里抛出一个错误，但你通常不想这样做，因为它增加了不必要的错误处理并使一切复杂化).

您只需为状态切片缩减器需要处理的操作定义案例，否则让默认案例通过简单地 return 处理当前状态来处理它。

const initState = {
  data: [],
};

export default (state = initState, action) => {
  switch (action.type) {
    case timeSlotWeek.GET_DATA_TIME_SLOT_WEEK_SUCCESS:
      return {
        // Pass payload to this
      };

    default:
      return state;
  }
};

如果您需要重置一些状态然后为此使用另一个操作和案例，即：

case 'resetTimeSlotWeek':
  return initState;

为什么 redux store 只获取最后一个 dispatch Action 的值

Why redux store only get value of last dispatch Action

reactjs

redux-thunk

react-redux