web-dev-qa-db-ja.com

Reduxルーター-更新後に状態を再生する方法

マルチステップフォームアプリケーションを使用していますが、redux状態を保存して更新後に再生する方法について頭を悩ませていますか？アプリで戻る/進むは期待どおりに機能しますが、ブラウザーを更新すると、以前の状態は空になります。理想的には、後で再生できるように、パスに関連するセッションストレージに以前の状態を保存できるようにしたいのですが、どうすれば簡単にできるかわかりません。誰かがこのようなことをして、いくつかのポインターを提供できますか？ありがとう。

reactjsreact-routerredux
20
Lee

複数ページのコンテキスト内で単一ページのアプリフレームワークを使用しようとしているようです。 2つのプレイをより良くするために、localStorageとの間で状態を同期する独自のミドルウェアを作成して、更新/ページナビゲーション後に状態が失われていないように見えるアプリを作成することができます。

  1. redux-logger ログ 前の状態と次の状態の両方 の方法と同様に、最初にミドルウェアを接続することから始めます（localStorageLoad ）およびlocalStorageDump関数作成の終了（createStoreWithMiddleware）（redux-loggerの直前）：
// store/configureStore.js

const createStoreWithMiddleware = applyMiddleware(
    localStorageLoad, thunk, promise, localStorageDump, logger
)(createStore);
  1. 次に、アプリを初期化するときに初期アクションを実行して、アプリがレンダリングされる前に保存状態をロードします。
// index.js

const store = configureStore();

store.dispatch({ type: 'INIT' });

ReactDOM.render(<App />, document.getElementById('root'));

localStorageLoadはINITアクションを処理し、何らかの種類のSET_STATEアクションをディスパッチします。これには、以前にlocalStorageに保存された状態のペイロードが含まれます。

// middleware/localStorageLoad.js

export default store => next => action => {
    const { type } = action;
    if (type === 'INIT') {
        try {
            const storedState = JSON.parse(
                localStorage.getItem('YOUR_APP_NAME')
            );
            if (storedState) {
                store.dispatch({
                    type: 'RESET_STATE',
                    payload: storedState
                });
            }
            return;
        } catch (e) {
            // Unable to load or parse stored state, proceed as usual
        }
    }

    next(action);
}

次に、状態をそのペイロードに置き換えるリデューサーを追加して、以前と同じようにアプリを効果的に再起動します。

  1. ループを完了するには、チェーンの最後にあるlocalStorageDumpミドルウェアが必要です。このミドルウェアは、各縮小状態オブジェクトをlocalStorageに保存します。このようなもの：
// middleware/localStorageDump.js

export default store => next => action => {
    const state = store.getState();
    localStorage.setItem('YOUR_APP_NAME', JSON.stringify(state));
    next(action);
}

ただのアイデア、実際に試していない。それがあなたが解決に向けて始めるのを助けることを願っています。

36
bosgood

リフレッシュ時に状態を保存することはできません。これは正常です。通常、これらはCookieまたはWebストレージに保存します。

  • Cookieはブラウザ、サーバー間で同期され、実行するリクエストごとに設定されます。
  • Localstorage は、データを格納するために最大5MBを提供し、リクエストで送信されることはありません。

戻ってきた：

  1. フォームに入力するときにlocalstorageプロパティを設定します。 （完了したら必ずクリーニングしてください）
  2. 不完全なフォームでページを更新します。
  3. ReactがFormコンポーネントをマウントするとき、componentWillMountメソッドを使用してlocalstorageおよびdispatchをリデューサーに読み取ります
  4. レデューサーはredux-stateを更新し、これによりlocalstorageから取得したプロパティでコンポーネントが更新されます。

Reduxを使用してフォームデータを保存する場合、localstorageのプロパティをディスパッチします。

Formコンポーネント内のlocalstorageを読み取らない場合、初期値を設定します。

お役に立てれば ！

3
JensDebergh