从slice调用动作从我的商店中删除了slice

时间:2020-05-23 17:43:24

标签: reactjs redux redux-toolkit

我有一个应用程序,正在使用slice将其从“正常” redux转换为redux工具包。我已经转换了我的减速器之一,并且工作正常。我写了第二篇文章,在我将旧操作切换到新操作之前,该应用已运行(但是,当我调用我的操作时,它们什么也不做)。

这是切片文件的当前状态:

tab %>% 
   group_by(COL1, grp = str_remove(COL2, "[-_].*")) %>% 
   mutate_at(vars(COL3, COL4), ~ replace(., is.na(.),
           .[str_detect(COL2, "-BICs")])) %>%
   ungroup %>%
   select(-grp) %>%
   filter(!str_detect(COL2, "-BICs"))

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

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

export default dataSlice.reducer;

当我将对旧动作创建者的调用替换为对我的新切片动作之一的调用时,该应用程序崩溃,因为该切片不再位于商店中!我打开redux devtools,状态丢失了我的对象。

与旧的动作创建者一起:

enter image description here

交换动作创建者后(上面粘贴的代码)

enter image description here

这是怎么回事?!

这是我应用中的另一个工作片段:

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 };

这是商店设置


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;

0 个答案:

没有答案