реакция / избыточность / неизменность / избыточность сохраняются: не сохраняются в локальном хранилище - PullRequest
Новая
       34

реакция / избыточность / неизменность / избыточность сохраняются: не сохраняются в локальном хранилище

2 голосов
/ 02 мая 2019

Обыскивал и только нашел вопросы, слабо связанные с моим вопросом.

Имеет приложение с избыточностью, в котором состояние состоит из неизменяемых записей.

Хотите сериализовать / десериализовать только подмножество моихсостояние для localalstorage: 

\Application <- Immutable Record
    \user <- regular js object
    \...
\...

Это мой текущий configureStore: 

import {
  compose, createStore, applyMiddleware, combineReducers,
} from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import createHistory from 'history/createBrowserHistory';
import { routerMiddleware, routerReducer } from 'react-router-redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import immutableTransform from 'redux-persist-transform-immutable';
import { Application } from '../modules/application/records/application';
import rootReducer from '../modules/reducers';

const persistConfig = {
  transforms: [immutableTransform()],
  key: 'root',
  storage,
};

const history = createHistory();
const reduxRouterMiddleware = routerMiddleware(history);

const reducer = combineReducers({
  ...rootReducer,
  routing: routerReducer,
});

const persistedReducer = persistReducer(persistConfig, reducer);

const createStoreWithMiddleware = compose(
  applyMiddleware(thunkMiddleware, reduxRouterMiddleware, createLogger()),

  window.devToolsExtension ? window.devToolsExtension() : f => f,
)(createStore);

export default function configureStore(initialState) {
  const store = createStoreWithMiddleware(persistedReducer, initialState);

  // reduxRouterMiddleware.listenForReplays(store);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../modules/reducers', () => {
      const nextRootReducer = require('../modules/reducers');
      store.replaceReducer(nextRootReducer);
    });
  }

  return persistStore(store);
}

Прямо сейчас, это не только не сохраняет какие-либо данные в моем localalstorage, это как-то заставляет всемоего состояния будет null, так что, например, у Application нет детей, где я ожидаю user.

Как правильно настроить мой configureStore для сохранения только Application/user объекта?

1 Ответ

0 голосов
/ 03 мая 2019

Мне нужно было обновить мой configureStore следующим образом: 

import {
  compose, createStore, applyMiddleware, combineReducers,
} from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import createHistory from 'history/createBrowserHistory';
import { routerMiddleware, routerReducer } from 'react-router-redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import immutableTransform from 'redux-persist-transform-immutable';
import { Application } from '../modules/application/records/application';
import rootReducer from '../modules/reducers';

const persistConfig = {
  transforms: [immutableTransform()],
  key: 'root',
  whitelist: 'application',
  storage,
};

const history = createHistory();
const reduxRouterMiddleware = routerMiddleware(history);

const reducer = combineReducers({
  ...rootReducer,
  routing: routerReducer,
});

const persistedReducer = persistReducer(persistConfig, reducer);

const createStoreWithMiddleware = compose(
  applyMiddleware(thunkMiddleware, reduxRouterMiddleware, createLogger()),

  window.devToolsExtension ? window.devToolsExtension({ trace: true }) : f => f,
)(createStore);

export default function configureStore(initialState) {
  const store = createStoreWithMiddleware(persistedReducer, initialState);

  // reduxRouterMiddleware.listenForReplays(store);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../modules/reducers', () => {
      const nextRootReducer = require('../modules/reducers');
      store.replaceReducer(nextRootReducer);
    });
  }
  const persister = persistStore(store);
  return { store, persister };
}

Поскольку я нахожусь в проекте React, мне также нужно было обновить мою маршрутизацию, чтобы использовать элемент PersistGate: 

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';

import { PersistGate } from 'redux-persist/integration/react';

import configureStore from './client/store/configureStore';

const { store, persister } = configureStore();
const { dispatch } = store;

render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persister}>
      <BrowserRouter>
         {Routes here...}
      </BrowserRouter>
    </PersistGate>
  </Provider>,
  document.getElementById('root'),
);

dispatch(actions.initializeApp());
...