Когда дело доходит до использования Redux Toolkit (RTK) с Redux Persist, существует несколько методов, которые вы можете использовать для сохранения и восстановления вашего хранилища Redux. Вот некоторые из наиболее распространенных подходов:
-
Настройка персистора: Redux Persist предоставляет функцию
persistStore, которая позволяет создавать объект персистора. Вы можете настроить этот персистор с вашим хранилищем Redux, указав такие параметры, как механизм хранения, префикс ключа и фильтры белого/черного списка. -
Обертка корневого компонента. Чтобы сохранить хранилище Redux, вы можете обернуть корневой компонент компонентом
PersistGate, предоставляемым Redux Persist. Это гарантирует, что ваш магазин будет обновлен перед рендерингом приложения, обеспечивая бесперебойную работу. -
Настройка фрагментов: Redux Toolkit позволяет определять фрагменты с помощью функции
createSlice. В своих срезах вы можете использовать полеextraReducersдля обработки действияREHYDRATE, отправленного Redux Persist. Это позволяет объединить сохраненное состояние с текущим состоянием каждого среза. -
Обработка межсрезовых зависимостей. Если ваши срезы имеют межсрезовые зависимости, вы можете использовать промежуточное программное обеспечение
thunkExtraиз RTK Query. Это промежуточное программное обеспечение помогает обрабатывать загрузку и кэширование данных из API, включая поведение повторной гидратации при использовании Redux Persist. -
Обработка асинхронных действий. При использовании асинхронных действий с RTK и Redux Persist важно учитывать, как обрабатывать состояния загрузки и ошибок во время регидратации. Вы можете использовать функцию
createAsyncThunkиз Redux Toolkit, чтобы определить свои асинхронные действия и эффективно обрабатывать эти сценарии.
Объединив эти методы, вы можете успешно интегрировать Redux Toolkit с Redux Persist, чтобы обеспечить бесперебойное сохранение вашего хранилища Redux во всех сеансах браузера.