Как сохранить Redux Store как загруженный файл, а затем загрузить его обратно? - PullRequest
Новая
       60

Как сохранить Redux Store как загруженный файл, а затем загрузить его обратно?

0 голосов
/ 23 сентября 2018

У меня есть веб-приложение, которое имеет представление о проектах.Я использую 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. Recreatestore, с initialState из предоставленного пользователем файла
  4. Вызовите ReactDOM.render () снова

Есть ли лучший способ, возможно, встроенные методы загрузки в redux и redux-persist что я пропустил в документах?

1 Ответ

0 голосов
/ 14 ноября 2018

Вот как я это решил, он не самый элегантный и требует регистрации обратных вызовов при перезагрузке магазина, но он работает. 

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