Как управлять и сохранять состояние вашего приложения в любом хранилище с помощью redux-persist
Если вы когда-либо разрабатывали приложение React и предпочитали поддерживать свое состояние с помощью Redux, в какой-то момент вы, вероятно, думали сохранить его в локальном хранилище, чтобы ваш пользователь всегда мог вернуться в то же место, где он был, прежде чем закрыть браузер или уйти. Ваш сайт. Пакет redux-persist делает это чрезвычайно простым, и в этой статье я покажу вам, как это сделать.
Требования
Предполагая, что вы уже настроили среду разработки Node, вот список всего, что вам понадобится для успешного завершения этого руководства.
Приложение React с Typescript
Если вы новичок в React, я предлагаю взглянуть на документацию и узнать, как создать свое первое приложение React с помощью create-react-app, прежде чем двигаться дальше. В этом руководстве я буду печатать свои компоненты, поэтому небольшое знание Typescript не помешает.
Redux Store
Я также предполагаю, что у вас уже есть некоторые знания о том, как отслеживать состояние вашего приложения с помощью Redux. Если вы новичок в Redux, сначала посмотрите, как создать свой магазин и подключить его к своему компоненту.
Redux-persist
Это пакет, который мы будем использовать для хранения и извлечения всех данных за нас.
npm install redux-persist @types/redux-persist --save
Штат
Для целей этого руководства мы будем предполагать, что состояние нашего приложения имеет структуру, определенную следующими интерфейсами:
export interface IAppState { authentication?: IAuthenticationState, extras: { loading: boolean, } } export interface IAuthenticationState { token: string, expires: number user?: { name: string, email: string, } }
Ключ аутентификации содержит учетные данные, используемые для аутентификации в отношении какой-либо службы, которая нас интересует. При сохранении нашего состояния мы постараемся не сохранять личную информацию пользователя локально, а вместо этого получать ее каждый раз, когда состояние восстанавливается. Дополнения содержат только непостоянную и нерелевантную информацию, которую мы не хотим сохранять.
Постоянные редукторы
Чтобы сохранить свое состояние в локальное хранилище, вы должны запустить редукторы с помощью функции «persistReducer». Он принимает только один аргумент, помимо самого редуктора, параметров конфигурации, которые определяют, как и какие части вашего состояния вы хотите сохранить. Наш будет выглядеть так:
import storage from "redux-persist/lib/storage"; export const config = { key: 'root', storage: storage, blacklist: ['extras'], transforms: [TransformCredentials] };
- ключ: ключ верхнего уровня вашего состояния, который должен сохраняться. В этом случае «root» означает, что все состояние сохраняется.
- хранилище: указывает, какой тип хранилища используется, доступно множество опций, вы можете проверить их здесь.
- черный список: вы можете пропустить сохраняющиеся поддеревья вашего состояния, просто добавив их ключи в черный список. В этом случае мы предпочитаем не сохранять наши дополнения, то есть их исходное состояние всегда будет перезапущено. Также доступна функция белого списка, обязательно проверьте их документацию.
- преобразования: вы можете применять функции преобразования к входящим и исходящим состояниям, это особенно полезно для сохраняющихся типов, которые обычно не сериализуемы JSON.
Мы также используем функцию TransformCredentials, чтобы скрыть информацию о пользователе из локального хранилища и получать ее каждый раз при регидратации состояния. Преобразования создаются с использованием пары функций, которые изменяют входящие и исходящие состояния данного ключа.
import {createTransform} from "redux-persist"; export const TransformCredentials = createTransform( (inboundState: IAuthenticationState, key): any => { return { ...inboundState, user: undefined, }; }, (outboundState: any, key) => { return { ...outboundState, user: fetchUser(outboundState.token) }; }, { whitelist: ['authentication'] } ); const fetchUser = (token : string) => { // Fetch the user data from some service // ... return user; }
- inboundState: функция, применяемая к вашему состоянию, когда оно сохраняется.
- outboundState: функция, примененная к любому объекту, который сохранялся, когда он возвращался обратно в ваш объект состояния.
- белый список: ключи, к которым следует применить преобразование.
- createTransform: функция, используемая для объединения функций преобразования.
Теперь, когда конфигурация настроена, вы можете сохранить корневой редуктор вашего приложения и создать свое хранилище с его постоянной версией:
import {persistReducer} from "redux-persist"; const rootReducer = combineReducers<IAppState>({ authentication: myAuthenticationReducer, extras: myExtrasReducer }); const persisted = persistReducer(rootConfig, rootReducer); const store = createStore(persisted);
Сохранение магазина
Теперь, когда вы правильно настроили постоянный редуктор, пришло время сохранить только что созданное хранилище. Это так же просто, как передать его в функцию «persistStore» и передать его в качестве свойства для компонента PersistGate, который вы готовы использовать из пакета redux-persist.
import {PersistGate} from "redux-persist/integration/react"; import {persistStore} from "redux-persist"; //... const persistor = persistStore(store); ReactDOM.render( <React.StrictMode> <Provider store={store}> <PersistGate loading={null} persistor={persistor}> ... </PersistGate> </Provider> </React.StrictMode>, document.getElementById('root'));
Все сделано!
Итак, теперь все изменения состояния, происходящие в компонентах в PersistGate, будут автоматически сохраняться в локальное хранилище в соответствии с предоставленными нами конфигурациями.
Есть много других настроек и способов, с помощью которых вы можете настроить и настроить свое постоянное поведение. Обязательно ознакомьтесь с полной документацией, чтобы увидеть, что лучше соответствует вашим предпочтениям и требованиям.