如何正确地设置redux-persist和中间件？

Question

我是一个新的反应和重复。我正在尝试将redux-persist应用到我的网站上，但是我得到了这两个错误。找不到真正造成错误的原因。需要一些帮助来解决这个问题。任何帮助都是非常感谢的！

1) Warning: Failed prop type: Invalid prop `store` of type `function` supplied to `Provider`, expected `object`.

2) Uncaught TypeError: store.getState is not a function

在我的Store.js中

import { composeWithDevTools } from 'redux-devtools-extension';
import { createStore, applyMiddleware } from 'redux';
import { persistStore } from 'redux-persist';
import { persistedReducer } from './root-reducer';
import thunk from 'redux-thunk';
import logger from 'redux-logger';


const middlewares = [thunk, logger];

export default () => {
    let store = createStore(persistedReducer, composeWithDevTools(
        applyMiddleware(...middlewares),
    ));
    let persistor = persistStore(store)
    return { store, persistor }
}

在我的root-reducer.js中

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

import userReducer from './User/User.reducer.jsx';

const persistConfig = {
    key: 'root',
    storage,
    whitelist: ['user']
};

const rootReducer = combineReducers({
    user: userReducer,
});

export const persistedReducer = persistReducer(persistConfig, rootReducer);

在我的Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

import { Provider } from 'react-redux';
import store from './redux/store';
import { PersistGate } from 'redux-persist/integration/react';
import persistor from './redux/store';

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

Answer 1

在store.js中导出函数，因此应该在Index.js中调用该函数，或者从store.js中导出对象(通过在内部调用该函数)。

所以它要么：

Store.js：

...
export default (() => {
    let store = createStore(persistedReducer, composeWithDevTools(
        applyMiddleware(...middlewares),
    ));
    let persistor = persistStore(store)
    return { store, persistor }
})();

或Index.js：

<Provider store={store()}>

如果您使用Index.js选项，那么您可能应该将store作为getStore导入，这会更有意义。

Answer 2

我最终把它弄清楚了，并做了一点修改。

在我的store.js中

import { composeWithDevTools } from 'redux-devtools-extension';

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

import thunk from 'redux-thunk';
import logger from 'redux-logger';

import rootReducer from './root-reducer';

const persistConfig = {
    key: 'root',
    storage: storage,
    whitelist: ['user']
};

const middlewares = [thunk, logger];

const enhancer = compose(
    composeWithDevTools(
        applyMiddleware(...middlewares),
    )
);

const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer,
    enhancer
);
const persistor = persistStore(store);
export { persistor, store };

在我的root-reducer.js中，

import { combineReducers } from 'redux';
import userReducer from './User/User.reducer.jsx';

const rootReducer = combineReducers({
    user: userReducer,
});

export default rootReducer;

在我的Index.js中

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { persistor, store } from './redux/storeUpdated';

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