web-dev-qa-db-ja.com

ブラウザの更新後にNgrxストアがリセットされます。アプリケーションに状態を保存させる方法は？

1つのコンポーネントからアクションをディスパッチします

this.store.dispatch({type : STORE_TEAMCREST , payload : team.crestURI});

他のコンポーネントでは、ストアを使用して選択します

this.store.select(state => state.table.teamCrest).subscribe(data => this.teamCrest = data);

私のアプリが連続して前後に移動する場合、これは問題なく機能しますが、ブラウザを更新すると、状態が値を失います。ブラウザの更新時に機能するようにその値を保持するにはどうすればよいですか？

angularreduxngrxngrx-store
10
INFOSYS

ストアには、アクションがディスパッチされるたびに呼び出されるsubscribe関数があり、状態ツリーの一部が変更されている可能性があります。簡単なソリューションとして、ここで状態をローカルストレージに永続化できます。

_this.store.subscribe(function() {
    localStorage.setItem('state', JSON.stringify(this.store.getState()));
})
_

ドキュメントはこちら

ローカルストレージに保存するには、状態を文字列化する必要があることに注意してください

この状態を使用するには、ローカルストレージ状態localStorage.getItem('state')（存在する場合）をレデューサーのデフォルト状態として渡す必要があります。これを実現するために、通常、キー 'state'を持つアイテムがローカルストレージに存在するかどうかを確認するヘルパー関数を使用し、値が存在する場合はJSON.parseを呼び出します。

デフォルトの減速機の場合：

_default:
        if (retrieveState()) {
            var newState = JSON.parse(retrieveState())          
            return newState
        }
        else {
            return {...whatever your default state is};
        }
_

また、簡単に見てみると、あなたが望むものを達成するミドルウェアが存在するようです： https://github.com/btroncone/ngrx-store-localstorage

18
hairmot