16

アプリがredux-persistで起動した後、保存されたデータにアクセスできません。

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

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

ストアが再水和した後、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
}

これが他のすべてのコンポーネントを更新することを期待して (redux のすべてのレデューサーはアクションで呼び出されるため)、ストアの読み込みが終了したときにトリガーされるアクションを作成しようとしました。

import { REHYDRATE_STORE } from './types'

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

そしてそれはレデューサーです: import { REHYDRATE_STORE } from '../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 に変わりますが、コンテナー コンポーネントを強制的に更新する方法がまだわかりません。

4

1 に答える 1

10

このレシピに従って解決しました： delay-render-until-rehydration-complete

基本的な解決策は次のとおりです。
をラップするコンポーネントで<Provider>、店舗がまだ水分補給されているかどうかを追跡するローカル状態フラグを作成します。persistStore() のコールバックを使用して、このフラグを更新します。このラッパーの render 関数では、フラグが true の場合は render <Provider>、それ以外の場合は一時的なビューをレンダリングします。

于 2016-08-03T19:08:43.780 に答える