如何將Redux Store保存為下載文件，然后再加載回去？

Question

我有一個帶有項目概念的Web應用程序。 我正在將react ， react-redux和react-persist與localForage用作持久目標。

我現在正在嘗試實現項目保存和項目加載功能，並且整個Redux狀態都用作項目文件。 項目文件應作為用戶下載文件保存到磁盤。 和/或任何雲文件存儲服務。

保存部分微不足道，只需將商店存儲起來，序列化為JSON並將其放到用戶那里進行下載即可。

加載有點棘手，我的ReactDOM.render很平常。

const {store, persistor} = configureStore()
ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <Router>
        <Route path={`${process.env.PATH}/`} component={App} />
      </Router>
    </PersistGate>
  </Provider>,
  document.getElementById('app')
)

如果已經創建了商店，則configureStore()查找並返回它，否則它將創建一個新商店。

對於加載過程，我在想這樣的事情

1. 從用戶加載JSON並解析
2. 清除localForage（因為它將覆蓋initalState）
3. 使用用戶提交的文件中的initialState重新創建商店
4. 再次調用ReactDOM.render（）

有沒有更好的方法，也許是我在文檔中錯過的redux和redux-persist內置的加載方法？

Answer 1

這就是我解決的方法，它不是最優雅的方法，需要在商店重新加載時注冊回調，但是它可以工作。

const createNewStore = (initialState = undefined) => {
  const persistConfig = { key: 'root', storage: localForage }
  store = createStore(
    persistReducer(persistConfig, reducers),
    initialState,
    createMiddleware()
  )
  persistor = persistStore(store)
}

const loadState = (state) => {
  createNewStore(state)
  callbacks.forEach(callback => {
    callback()
  })
}

export const loadStore = (json) => {
  return new Promise((resolve, reject) => {
    let state

    try {
      state = JSON.parse(json)
    } catch (err) {
      return reject(err)
    }

    if (!persistor) {
      return resolve(loadState(state))
    }
    persistor.purge().then(() => {
      return resolve(loadState(state))
    }).catch(() => {
      return resolve(loadState(state))
    })
  })
}

const getStore = (storeReplaceCallback = null) => {
  if (storeReplaceCallback) {
    callbacks.push(storeReplaceCallback)
  }

  if (!store) {
    createNewStore()
  }

  return { store, persistor }
}