初期状態からのデフォルト値は、貯蔵所の再水和前にロードされ、redux-persistで読み込まれます。

Question

アプリがredux-persistで始まると、保存されたデータにアクセスできません。

還元剤は、私の初期状態で定義されたデータで初期化されます。以前のセッションの状態がAsyncStorageで読み込まれるまでに、コンポーネントは既定のデータと共に既に表示されています。

私は、データが保存され、正常にフェッチされたことを知っています。画面を別の画面にして戻ってくると、データが正しく表示されていることがわかります。状態と小道具をデバッグすることは、これが非同期タイミングの問題であることも示しています。

在庫が再水和した後に、レフィックス容器の装填をどのように遅らせることができますか？あるいは、店舗のロードが完了したときにconatainer（およびその子）を更新するよう強制することはできますか？

ここに私が試したことがあります。私の店を設定するには ：

：

これは他のすべてのコンポーネント（Reduxの中のすべての減速がアクションで呼び出されているため）が更新されますことを期待し

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, 
    } 
} 

そして、それは減速だ： インポート{REHYDRATE_STORE}「../actions/types' constの初期状態= {から storeIsReady：偽 }

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

しかし、rehydrationが完了するとstoreIsReady状態はtrueに変わりますが、コンテナコンポーネントを強制的に更新する方法はまだ分かりません。

Answer 1

私はこのレシピに従うことによってそれを解決する以下のよう delay-render-until-rehydration-complete

基本的溶液である：
<Provider>をラップ成分で 、ストアがまだか再水和したか否かを追跡するローカル状態フラグを作成します。 persistStore（）のコールバックを使用してこのフラグを更新します。 このラッパーのレンダリング機能で、フラグがtrueの場合は、<Provider>をレンダリングします。それ以外の場合は、一時的な表示を行います。