代码之家 › 专栏 › 技术社区 › David Polák

如何将Redux存储保存为下载的文件,然后将其加载回?

redux-persist react-redux redux reactjs

David Polák · 技术社区 · 6 年前

我有一个网络应用程序,它有一个项目的概念。我正在使用 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() 查找是否已经创建了存储并返回它,否则它将创建一个新的存储。

对于加载程序,我想这样做就可以了

清除localfour(因为它会覆盖initalState)
使用用户提交的文件中的initialState重新创建存储
再次调用ReactDOM.render()

有没有更好的方法,也许是内置的加载方法 redux 和 redux-persist 我在文件里漏掉了?

1 回复 | 直到 6 年前

David Polák 6 年前

这就是我如何解决它的,它不是最优雅的,需要在商店重新加载时注册回调,但它是有效的。

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

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

6 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Luckkks · 过渡色工作不正常

6 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

6 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

6 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

6 月前

noblerare · Vite错误-未定义导出(SSR)

6 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

7 月前