Как управлять и сохранять состояние вашего приложения в любом хранилище с помощью 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, будут автоматически сохраняться в локальное хранилище в соответствии с предоставленными нами конфигурациями.

Есть много других настроек и способов, с помощью которых вы можете настроить и настроить свое постоянное поведение. Обязательно ознакомьтесь с полной документацией, чтобы увидеть, что лучше соответствует вашим предпочтениям и требованиям.

Ресурсы