Значения по умолчанию из начального состояния загружаются до того, как хранилище регидратируется с помощью сокращения-persist

У меня возникают проблемы с доступом к сохраненным данным после запуска приложения с redux-persist.

Редуктор инициализируется данными, определенными в моем начальном состоянии. К тому моменту, когда предыдущее состояние сеанса загружается с AsyncStorage, компонент уже отображается с данными по умолчанию.

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

Как я могу отложить загрузку контейнеров-редуктов после того, как хранилище будет регидратировано. В качестве альтернативы, могу ли я принудительно обновить conatainer (и его дочерние элементы) для обновления при завершении загрузки магазина?

Вот что я пробовал. для настройки моего магазина:

export default function configureStore(initialState) {
    const middlewares = [thunk];
    if (process.env.NODE_ENV === `development`) {
        const createLogger = require(`redux-logger`);
        const logger = createLogger();
        middlewares.push(logger);
    }

    let store = compose(
        applyMiddleware(...middlewares),
        autoRehydrate() )(createStore)(reducers);

        persistStore(store, {blacklist: ['routing'], storage: AsyncStorage}, () => {
            store.dispatch(storeRehydrateComplete())
        })


    return store
}

Надеемся, что это обновит все остальные компоненты (так как все редукторы в редуксе вызывают в действии), я попытался создать действие, которое запускается, когда хранилище заканчивает загрузку:

import { REHYDRATE_STORE } from './types'

export function storeRehydrateComplete(){
    return {
        type: REHYDRATE_STORE,
    }
}

И это редуктор: import {REHYDRATE_STORE} из '../actions/types' const initialState = { storeIsReady: false }

export default function reducer(state = initialState, action){
    switch (action.type) {
        case REHYDRATE_STORE:
            return {...state, storeIsReady:true}
            break;
        default:
            return state
            break;
    }
}

Но хотя состояние storeIsReady изменяется на true при завершении регидратации, я все равно не могу понять, как принудительно обновить компонент контейнера.

Ответы

Ответ 1

Я решил это, выполнив этот рецепт: delay-render-until-rehydration-complete

В основном решение выглядит следующим образом:
В компоненте, который обертывает <Provider>, создайте флаг локального состояния, который отслеживает, сохраняет ли хранилище еще или нет. Использование обратного вызова persistStore() для обновления этого флага. В функции рендеринга этой обертки, если флаг имеет значение true, визуализируйте <Provider>, в противном случае сделайте некоторое временное представление.