Redux路由器 - 如何刷新後重播狀態？

Question

我有一個多步驟的表單應用程序，我正在努力解決如何保存我的redux狀態並在刷新後重播它的例子？在應用程序中後退/前進按預期工作，但在瀏覽器刷新後，我以前的狀態爲空。理想情況下，我希望能夠保存與路徑有關的會話存儲中的先前狀態，以便稍後重播，但我沒有看到我可以輕鬆地做到這一點。有沒有人做過這樣的事情，並可以提供一些指針？謝謝。

Answer 1

看起來您正嘗試在多頁面上下文中使用單頁面應用程序框架。爲了讓這兩種遊戲更好地結合在一起，你可以考慮讓自己的中間件與localStorage同步狀態，以創建一個在刷新/頁面導航後看起來沒有丟失任何狀態的應用程序。

1. 到redux-logger日誌both the previous and next states，我可能會通過在createStoreWithMiddleware函數創建（redux-logger前右）的開頭（localStorageLoad）和結束（localStorageDump）在中間件封堵啓動方式相似：

// store/configureStore.js 

const createStoreWithMiddleware = applyMiddleware(
    localStorageLoad, thunk, promise, localStorageDump, logger 
)(createStore); 

然後當你初始化應用程式之前應用程式呈現到加載存儲狀態觸發的初始動作右：

// 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); 
} 

然後，添加一個reducer，用該有效負載替換狀態，有效地重新啓動應用程序，就像以前一樣。

要完成循環，你需要一箇中間件localStorageDump附帶在該保存每個還原態物體插入localStorage的鏈的末端。事情是這樣的：

// middleware/localStorageDump.js 

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

只是一個想法，還沒有真正嘗試過。希望能幫助你開始尋求解決方案。

Answer 2

你不能在刷新狀態下存儲狀態，這是正常的。通常情況下，您將這些存儲在cookie或web存儲中。

• Cookie在瀏覽器，服務器之間同步，並在您執行的每個請求中設置。
• Localstorage爲您提供高達5MB的數據存儲空間，永遠不會發送請求。

終極版：

1. 在形式填充時設置的localStorage特性。 （請務必在完成時清除它）
2. 使用不完整的表單刷新頁面。
3. 當反應坐騎你Form組件，使用componentWillMount方法將localstorage和dispatch數據讀取到減速
4. 減速機更新了Redux-狀態，這又與你的localStorage得到屬性，更新的組件。

如果使用redux來存儲表單數據，則調度localstorage的屬性。

如果沒有讀取Form組件內的localstorage並設置初始值。

希望這會有所幫助！