Standardwerte aus dem Ausgangszustand werden geladen, bevor der Speicher mit Redux-Persist re-hydratisiert wird

Question

Ich habe Probleme beim Zugriff auf gespeicherte Daten, nachdem die App mit redux-persist gestartet wurde.

Der Reduzierer wird mit den Daten initialisiert, die in meinem Anfangszustand definiert sind. Zu dem Zeitpunkt, zu dem der Status der vorherigen Sitzung mit AsyncStorage geladen wird, wird die Komponente bereits mit den Standarddaten angezeigt.

Ich weiß, dass die Daten erfolgreich gespeichert und abgerufen werden. Wenn ich den Bildschirm zu einem anderen zurücklasse und zu ihm zurückkomme, kann ich sehen, dass die Daten korrekt angezeigt werden. Das Debuggen des Status und der Requisiten zeigt auch, dass dies ein asynchrones Timing-Problem ist.

Wie kann ich die Beladung der Reduxbehälter verzögern, bis der Vorrat rehydriert? Alternativ kann ich erzwingen, dass der Conatainer (und seine untergeordneten Elemente) aktualisiert werden, wenn der Laden beendet ist?

Hier ist was ich versucht habe. meinen Speicher zu konfigurieren:

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 
} 

die Hoffnung, dass damit auch alle übrigen Komponenten aktualisieren (da alle Reduzierungen in redux werden in einer Aktion genannt), ich habe versucht, eine Aktion erstellen, die ausgelöst wird, wenn der Laden Laden beendet:

import { REHYDRATE_STORE } from './types' 

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

Und es ist Minderer: Import {REHYDRATE_STORE} von‘../actions/types' const initial = { storeIsReady: false }

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

Aber obwohl der storeIsReady-Status auf wahr wechselt, wenn Rehydratisierung abgeschlossen ist, konnte ich immer noch nicht herausfinden, wie erzwungen wird, die Container-Komponente zu aktualisieren.

Answer 1

I gelöst es durch dieses Rezept: delay-render-until-rehydration-complete

Grundsätzlich wird die Lösung wie folgt:
In der Komponente, die <Provider> Wraps, eine lokale Zustandsflagge erstellen, hat der Laden verfolgt, ob noch oder nicht rehydratisiert. Verwenden Sie den Callback von persistStore(), um dieses Flag zu aktualisieren. Wenn das Flag in der Renderfunktion dieses Wrappers wahr ist, rendern Sie <Provider>, andernfalls rendern Sie eine temporäre Ansicht.