仅在开发环境中使用 redux-persist答案

【问题标题】：Using redux-persist only in development environment仅在开发环境中使用 redux-persist
【发布时间】：2018-06-22 12:53:06
【问题描述】：

我正在使用redux-persist，它很棒。

但是，当我尝试在开发中仅使用它时，它似乎不起作用。我在这里做错了什么？

store.js

import thunk from 'redux-thunk';
import { createStore, applyMiddleware, compose } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import rootReducer from './reducers';

const persistConfig = {
  key: 'root',
  storage,
};

let store;
let persistor;

// Show the Redux Devtools only in development mode.
if (process.env.NODE_ENV === 'development') {
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const persistedReducer = persistReducer(persistConfig, rootReducer);
  store = createStore(persistedReducer, composeEnhancers(applyMiddleware(thunk)));
  persistor = persistStore(store);
} else {
  store = createStore(rootReducer, applyMiddleware(thunk));
}

export { store, persistor };

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import App from './App';
import { store, persistor } from './store';
import registerServiceWorker from './registerServiceWorker';

if (process.env.NODE_ENV === 'development') {
  ReactDOM.render(
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>,
    document.getElementById('root'),
  );
} else {
  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root'),
  );
}

registerServiceWorker();

【问题讨论】：

绝对是“开发”而不是“开发”或“开发”吗？
是的！它适用于 Redux 开发工具。
你发现问题了吗？

标签： reactjs react-redux redux-persist

【解决方案1】：

我不确定为什么它对您不起作用，但我通过根据我是否要保留数据更改白名单/黑名单配置解决了这个问题！此外，您应该了解“嵌套持久化”以提供更好的控制”：https://www.npmjs.com/package/redux-persist

当您不想持久化存储时，只需将“白名单”属性添加到您的配置中，用于存储中的一个无关紧要的值，例如“加载”。

【讨论】：