Как правильно сохранять данные из redux store в localstorage?

Question

[Сергей Сунцев]

В проекте использую redux, redux-saga, immutable, reselect.
Есть задача сохранять данные из store в localstorage, при том использую redux-forms, соответственно объект form сохранять не надо.

Answer 1

[Игорь Забродин]

Подойдёт?

Comments

[Сергей Сунцев]

Я его пробовал, видать что то не так понял, или что то не так с моей архитектурой.
У меня есть файл redusser.js где я собираю все модели данных и есть файл store. js куда я импортирую редьюссеры и саги.
Собственно подключаю я всё в в reducer.js примерно так, для примера пробую разрешить один объект {check}

import {combineReducers} from 'redux'
import {routerReducer as router} from 'react-router-redux'
import {reducer as form} from 'redux-form'
import authReducer, {moduleName as authModule} from '../ducks/main'
import peopleReducer, {moduleName as peopleModule} from '../ducks/people'
import connectionReducer, {moduleName as connectionModule} from '../ducks/connection'
import registrationReducer, {moduleName as registrationModule} from '../ducks/registration'
import checkReducer, {moduleName as checkModule} from '../ducks/check'
import productsReducer, {moduleName as productsModule} from '../ducks/products'

import { persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'


const persistConfig = {
  key: 'check',
  storage: storage,
  whitelist: ['check']
}


export default combineReducers({
    router, form,
    [authModule]: authReducer,
    [peopleModule]: peopleReducer,
    [connectionModule]: connectionReducer,
    [registrationModule]: registrationReducer,
    [checkModule] : persistReducer(persistConfig, checkReducer),
    [productsModule]: productsReducer,
})

[Игорь Забродин]

В моём случае редьюсеров поменьше (в предыдущем было примерно столько же как у вас, но там другая версия redux-persist):
reducer/index.js:

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

import { gridListReducer } from 'Containers/GridList';
import { editorFormReducer } from 'Containers/EditorForm';

export default combineReducers({
  routing: routerReducer,
  templates: gridListReducer,
  editorForm: editorFormReducer()
});

configureStore.js:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension'; // eslint-disable-line
import thunk from 'redux-thunk';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

import rootReducer from './reducer';

const persistConfig = {
  key: 'root',
  debug: !(process.env.NODE_ENV === 'production'),
  storage
};

const middleware =
  process.env.NODE_ENV === 'production'
    ? applyMiddleware(thunk)
    : composeWithDevTools(applyMiddleware(thunk));

const persistedReducer = persistReducer(persistConfig, rootReducer);

const configureStore = () => {
  const store = createStore(persistedReducer, middleware);
  const persistor = persistStore(store);

  return { store, persistor };
};

export default configureStore;

app.js:

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';

import Layout from 'Components/Layout';
import IndexPage from 'Containers/Pages/Index';

import configureStore from './configureStore';

const { store, persistor } = configureStore();

const App = () => (
  <Provider store={store}>
    <PersistGate loading={<Spinner />} persistor={persistor}>
      <Router>
        <Layout>
          <Switch>
            <Route exact path="/mail-template" component={IndexPage} />
          </Switch>
        </Layout>
      </Router>
    </PersistGate>
  </Provider>
);

export default App;

[Сергей Сунцев]

Игорь Забродин, Ага, я понял, вы весь стор оборачиваете получается, а не отдельную модель, попробую так же