domyślne wartości ze stanu początkowego są ładowane przed ponownym nawadnieniem magazynu przy użyciu redux-persist

Question

Mam problemy z dostępem do zapisanych danych po uruchomieniu aplikacji pod numerem redux-persist.

Reduktor inicjuje dane zdefiniowane w moim początkowym stanie. Do czasu ładowania stanu poprzedniej sesji za pomocą AsyncStorage komponent jest już wyświetlany z domyślnymi danymi.

Wiem, że dane zostały zapisane i pobrane pomyślnie. Jeśli zostawiam ekran innym i wrócę do niego, widzę, że dane są wyświetlane poprawnie. Debugowanie stanu i rekwizytów również pokazuje, że jest to problem asynchronizacji czasu.

Jak mogę opóźnić załadunek pojemników redux do po nawodnieniu w sklepie. Alternatywnie, czy mogę wymusić aktualizację koniuszyna (i jego dzieci), aby zaktualizować po załadowaniu magazynu?

Oto, co próbowałem. skonfigurować mój sklep:

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 
} 

Mając nadzieję, że to będzie zaktualizować wszystkie inne składniki (ponieważ wszystkie reduktory w Redux są nazywane w działaniu), próbowałem tworzyć akcję, która wyzwala, gdy sklep zakończeniu ładowania:

import { REHYDRATE_STORE } from './types' 

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

I jest reduktor importu {REHYDRATE_STORE} z const initialState =”../actions/types { storeIsReady false }

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

Ale chociaż stan storeIsReady zmienia się na prawdziwy po zakończeniu nawadniania, nadal nie jestem w stanie wymyślić, jak wymusić aktualizację komponentu kontenera.

Answer 1

Rozwiązałem go wykonując ten przepis: delay-render-until-rehydration-complete

Zasadniczo rozwiązanie jest w następujący sposób:
W składniku, który owija <Provider> utworzyć lokalną flagę państwową, która śledzi, czy sklep ma jeszcze ani nie nawodniony. Używanie wywołania zwrotnego persistStore() w celu aktualizacji tej flagi. W funkcji renderowania tego opakowania, jeśli flaga jest prawdziwa, wyrenderuj <Provider>, w przeciwnym razie wyrenderuj tymczasowy widok.