如何将Redux Store保存为下载文件，然后再加载回去？

Question

I have a web app which has a notion of projects. I am using react , react-redux and react-persist with localForage as the persist target.

I am now trying to implement project save and project load functionality, and the entire Redux State serves as a project file. The project file should be saved to disk as a user download. And/or any cloud file storage service.

The saving part is trivial, just take the store, serialize to JSON and plop it to the user for download.

The loading is a little bit trickier, my ReactDOM.render is fairly usual.

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')
)

The configureStore() looks up if there is already a store created and returns it, otherwise it creates a new store.

For the load procedure, I was thinking something like this would do

1. Load JSON from user and parse
2. Clear localForage (as it would overwrite the initalState)
3. Recreate store, with initialState from the user submitted file
4. Call ReactDOM.render() again

Is there a better way, perhaps built-in load methods into redux and redux-persist which I missed in the docs?

Answer 1

This is how I solved it, it's not the most elegant and requires registering callbacks on store reload, but it works.

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 }
}