如何将 Redux Store 保存为下载的文件，然后将其加载回来？答案

【问题标题】：How to save Redux Store as a downloaded file and then load it back?如何将 Redux Store 保存为下载的文件，然后将其加载回来？
【发布时间】：2018-09-23 12:00:26
【问题描述】：

我有一个包含项目概念的网络应用程序。我使用react、react-redux 和react-persist 和localForage 作为持久目标。

我现在正在尝试实现项目保存和项目加载功能，整个Redux State作为一个项目文件。项目文件应作为用户下载保存到磁盘。和/或任何云文件存储服务。

保存部分很简单，只需将存储，序列化为 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() 查找是否已创建商店并返回，否则创建新商店。

对于加载过程，我在想这样的事情会做

从用户加载 JSON 并解析
清除 localForage（因为它会覆盖 initalState）
使用用户提交的文件中的 initialState 重新创建存储
再次调用 ReactDOM.render()

有没有更好的方法，也许是我在文档中错过的 redux 和 redux-persist 的内置加载方法？

【问题讨论】：

标签： reactjs redux react-redux redux-persist

【解决方案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 }
}

【讨论】：