Сброс нескольких состояний с помощью активного редукса

Question

В моем приложении есть несколько шагов, каждый из которых имеет свое собственное состояние, и я хочу иметь ссылку, которая запускает действие onClick, которое сбрасывает все эти состояния обратно к их начальному значению. К сожалению, у меня проблемы с этим.

Сначала у меня есть этот Nav, в котором я вызываю свою функцию resetHandler(), в которой я хотел бы выполнить действие сброса:

<StageNavigation
        resetHandler={() => {
          history.push(routes.EVENTS.path)
          // right now it only takes the users back one step, but I also want it to reset all states
        }}
      />

Я пытался найти решение по этому вопросу. и наиболее используемое «решение» для всего этого было что-то вроде этого:

export default rootReducer = (state, action) => {
  if (action.type === LOGOUT) {
    state = undefined;
  }

  return appReducer(state, action);
};

Теперь в моем index.ts (мы используем машинопись, если это важная информация), я пробовал что-то подобное:

const appReducer = combineReducers({
  events,
  registrations,
  program,
  institution,
  misc,
  paymentData,
  participant,
})


const rootReducer = (state, action) => {
      // what action can I give it? Should I even give it an action?
      state = undefined
      return appReducer(state, action)
    };

const persistedReducer = persistReducer(persistConfig, rootReducer)

const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
    },
  }),
})

const persistor = persistStore(store)

export default store

export { persistor, rootReducer, appReducer }
export type RootState = ReturnType<typeof rootReducer>
export type AppThunk = ThunkAction<void, RootState, null, Action<string>>

Проблема в том, что я действительно не знаю, какое действие я мог бы выполнить rootReducer, или если мне вообще понадобится? Тогда также, как бы я назвал это в моем resetHandler() и как я мог бы дать ему состояние и действие, необходимые для полного сброса всего?

Спасибо за любые ответы.

Answer 1

Поскольку вы хотите изменить значения, хранящиеся в магазине Redux, вам определенно понадобится действие . Давайте назовем это RESET_VALUES, например. Используя этот тип действия, rootReducer, который вы написали в качестве примера, должен добиться цели:

export default rootReducer = (state, action) => {
  if (action.type === RESET_VALUES) {
    state = undefined;
  }

  return appReducer(state, action);
};

Как только вы это сделаете, вам просто нужно отправить это новое действие RESET_VALUES из вашего resetHandler метода . Вы отправите его как любое другое действие, ничего особенного в этом нет.

Когда запускается действие сброса, все редукторы запустятся и установят в свое состояние параметр по умолчанию, который вы присвоили их state аргументу . Если вы не указали ничего, вместо этого будет использоваться undefined.

Чтобы гарантировать, что ваши редукторы получают правильное значение при сбросе, убедитесь, что все ваши редукторы имеют начальное состояние, установленное в качестве значения по умолчанию для параметра state. Это важно, если вы хотите сохранить какую-то структуру, например, в этом примере:

const initialState = {
  itemList: [],
  selectedItem: null
};

function itemReducer (state = initialState, action) { ... }

В этом случае вы хотите, чтобы ваш редуктор всегда возвращал объект с предопределенной структурой. Если вам не удастся добавить initialState в качестве значения по умолчанию для параметра state, ваша структура данных будет потеряна во время сброса.

В любом случае, будьте осторожны с этим здесь:

const rootReducer = (state, action) => {
  state = undefined
  return appReducer(state, action)
};

Имейте в виду, что любое инициируемое вами действие будет автоматически получено всеми редукторами . Это означает, что всякий раз, когда вы запускаете действие в любом месте, ваш rootReducer также вызывается. Так как вы здесь не фильтруете по типу действия, вы удаляете все состояние каждый раз, когда отправляется действие. Из-за этого убедитесь, что вы заключили state = undefined в блок if, как в примере выше, чтобы строка кода не выполнялась, если вы действительно не пытаетесь выполнить сброс.