Ngrx Strore瀏覽器刷新後重置，如何使應用程序保持狀態？

我從一個組件Ngrx Strore瀏覽器刷新後重置，如何使應用程序保持狀態？

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

派遣行動，並在其他設備我從應用商店選擇

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

如果我的應用程序會依次向前或向後這工作得很好，但一旦我如何瀏覽器刷新狀態失去它的價值如何保持它的價值，使其在瀏覽器刷新工作。

來源

2017-08-09 INFOSYS

你得用戶無論是餅乾或本地存儲因此在init中，您可以檢查以前的狀態，並且每次更改時重寫本地存儲或cookie。 –

@EduardoVargas任何其他可以實現此目的 – INFOSYS

您的商店有一個subscribe函數，在調度操作時會調用該函數，並且狀態樹的某些部分可能會發生更改。對於一個簡單的解決方案，你可以堅持的狀態到本地存儲位置：

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

Documentation here

請注意，您需要將字符串化的狀態，將其存儲在本地存儲

要使用此狀態，您需要將本地存儲狀態localStorage.getItem('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

來源

2017-08-09 10:15:05 hairmot

如何在使用存儲時使用retive，選擇狀態將被更新還是我們需要從本地存儲中獲取？ – INFOSYS

您繼續使用store.select以同樣的方式。你的store.subscribe函數只是確保內存中的商店被備份，如果你殺了你的內存中的會話 – hairmot

我在哪裏放置這個訂閱呼叫？在漫遊級別或特色級別，因爲我有懶加載模塊2 – INFOSYS

Ngrx Strore瀏覽器刷新後重置，如何使應用程序保持狀態？

回答

相關問題