Блог

В некоторых приложениях react / redux должен произойти переход к маршруту после отправки некоторого действия. В моем случае у меня именно такая ситуация. позвольте мне показать вам один редуктор фрагмента состояния.

 nextStep: (state, action) => {
  const { steps } = state;

  if (steps[state.currentTopNavStep][state.currentStep   1]) {
    state.currentStep  ;
  } else {
    state.currentTopNavStep  ;
    state.currentStep = 0;
  }
  if (action.payload.history) {
    const nextStep = steps[state.currentTopNavStep][state.currentStep];
    const { gendersMatch, valuesExist } = nextStep;
    let realNextStep;

    if (
      (valuesExist amp;amp; valuesExist(state, fbObject)) ||
      (gendersMatch amp;amp; gendersMatch(state))
    ) {
      state.currentStep  ;
      realNextStep = steps[state.currentTopNavStep][state.currentStep];
    } else {
      realNextStep = nextStep;
    }

    const newRoute = realNextStep.route;
    action.payload.history.push(newRoute.path);
  }
}
 

В последней строке я хочу вставить новый маршрут в историю, который я получаю в качестве полезной нагрузки при отправке этого действия. Я хотел бы переместить логику внутри редуктора в промежуточное программное обеспечение. reduxToolkit предоставляет функцию createAsyncThunk. Я хочу получить что-то вроде этого:

 const nextStep = createAsyncThunk(
  'state/nextStep',
  async (history, thunkAPI) => {
    const { state } = thunkAPI.getState();
    const { steps } = state;

    if (steps[state.currentTopNavStep][state.currentStep   1]) {
      state.currentStep  ;
    } else {
      state.currentTopNavStep  ;
      state.currentStep = 0;
    }
    if (history) {
      const nextStep = steps[state.currentTopNavStep][state.currentStep];
      const { gendersMatch, valuesExist } = nextStep;
      let realNextStep;

      if (
        (valuesExist amp;amp; valuesExist(state, fbObject)) ||
        (gendersMatch amp;amp; gendersMatch(state))
      ) {
        state.currentStep  ;
        realNextStep = steps[state.currentTopNavStep][state.currentStep];
      } else {
        realNextStep = nextStep;
      }

      const newRoute = realNextStep.route;
      const res = await history.push(newRoute.path);
      return res; //this will be the action payload
    }
  }
);  
 

А затем используйте это внутри extraReducers:

  extraReducers: {
    [nextStep.fullfilled]: (state, action) => {
       //Here I face the problem, how to handle it in the reducer
      return action.payload;
    },
  },
 

Кто-нибудь может мне помочь в этом случае

Дело в том, что промежуточное программное обеспечение не должно изменять состояние.
Вам действительно придется делать это отдельно друг от друга:

• редуктор изменяет состояние
• промежуточное программное обеспечение создает побочные эффекты

Кроме того, createAsyncThunk здесь не тот инструмент. Цель cAT состоит в том, чтобы иметь thunk, который отправляет «ожидающее» действие, а затем «выполненное» или «отклоненное» действие. Похоже, они вам здесь вообще не нужны.
Вам либо нужно вручную написать обычный блок, который сначала отправляет действие, после этого отправка получает новое состояние, а затем выполняет побочный эффект, либо вам придется написать промежуточное программное обеспечение для этого самостоятельно (что также довольно просто, в документах есть примеры на этот счет).