0

我有一个应用程序，我正在使用切片将“普通”redux 转换为 redux 工具包。我已经转换了我的一个减速器，它工作正常。我已经写了第二个片段，在我将旧动作切换到新动作之前，应用程序会运行（但当然，当我调用我的动作时，它们不会做任何事情）。

以下是切片文件的当前状态：

export const dataSlice = createSlice({
  name: 'data',
  initialState: defaultDataState,
  reducers: {
    clearStudyData(state) {
      state.series = [];
    },
    // ... other actions ... 
  },
});

export default dataSlice.reducer;

这是我测试交换动作创建者的第一个地方：

export const handleStudyDataMessage = (message: MessageEvent): ThunkAction =>
  dispatch => {
    const data = JSON.parse(message.data);
    const { series: receivedSeries }: BackendStudyDataPayload = data;
    if (receivedSeries === null) {
      dispatch(dataSlice.actions.clearStudyData())  // <--- action from the slice
      // dispatch(clearStudyData);     <--- old action creator
    } else {
      const str = 'A message was received on the study data channel, with series:';
      dispatch(updateStudyDataFromBackend(receivedSeries));
    }
  };

// the old action creator
export const clearStudyData = { type: ActionType.CLEAR_DATA };

当我用对我的新切片操作之一的调用替换对旧操作创建者的调用时，应用程序崩溃，因为切片不再在商店中！！！我打开 redux devtools，状态缺少我的对象。

使用旧的动作创建者：

在此处输入图像描述

交换动作创建者后（上面粘贴的代码）

在此处输入图像描述

这里发生了什么？！

这是我的应用程序中的另一个工作切片：


const metaSlice = createSlice({
  name: 'meta',
  initialState: defaultMetaState,
  reducers: {
    tabChanged(state, { payload }) { state.activeTab = payload.tab },
    errorReported(state, { payload }) {
      const { error } = payload;
      const { code, message, recoverable } = error;
      if (error && !recoverable && state.statusTimer) {
        clearTimeout(state.statusTimer);
      }
      state.error = error;
    },
    statusUpdated(state, { payload }) { state.status = payload.status },
    statusTimerReset(state, { payload }) { state.statusTimer = payload.timer },
    clearError(state) { state.error = null; },

    systemInfoReceived(state, { payload }) {
      return { ...state, ...payload.info };
    },
    scannerStatusUpdated(state, { payload }) { state.scannerStatus = payload.status; },
    licenseStatusUpdated(state, { payload }) { state.licenseStatus = payload.status; },
    feedbackSet(state) { state.feedback = true; },
    dispatchError() { console.error('Dispatch Error'); },
  },
});

export const { /* all the actions */ } = metaSlice.actions;

export default metaSlice.reducer;

这是商店设置

const rootReducer: Reducer<AppState, Action> = combineReducers({
  settings, meta, settingsMeta, data,
});
const middlewareEnhancer = applyMiddleware(thunkMiddleware);
const storeEnhancers = [middlewareEnhancer];
const composedEnhancer = composeWithDevTools(...storeEnhancers);
const store = createStore(rootReducer, composedEnhancer);
4

0 回答 0