无法让 React-redux 与 redux-persist 一起使用

Posted 2023-02-19

【中文标题】无法让 React-redux 与 redux-persist 一起使用

【英文标题】：Can't get React-redux to work with redux-persist

【发布时间】：2018-06-04 09:47:23

【问题描述】：

您好，我正在尝试使用 react-redux 设置 redux-persist，但无法使其正常工作。我收到以下错误：

TypeError: _store2.default 不是函数 [了解更多] index.js:12:29

我现在如何进行设置：

store.js

import applyMiddleware, createStore from 'redux';
import persistStore,persistCombineReducers from 'redux-persist';
import storage from 'redux-persist/es/storage' // default: localStorage if web, AsyncStorage if react-native

import  logger  from 'redux-logger';
import thunk from 'redux-thunk';
import promise from 'redux-promise-middleware';
import reducer from './reducers'

const middleware = applyMiddleware(promise(), thunk, logger);

const config = 
  key: 'root',
  storage,
;

const reducers = persistCombineReducers(config, reducer);

export const configureStore = () => 
  const store = createStore(reducers, middleware);
  const persistor = persistStore(store);
  return  persistor, store ;
;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import BrowserRouter from 'react-router-dom';
import Provider from 'react-redux';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';
import './css/app.css';
import App from './containers/App';

import  PersistGate  from 'redux-persist/es/integration/react'
import configureStore from './store';
const  persistor, store  = configureStore()


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

更新 1

根据@azium 的回复，我现在得到：

组件出现上述错误： 在 Connect(App) 中（由 Route 创建） 在 Route 中（由 withRouter(Connect(App)) 创建） 在 withRouter(Connect(App)) 在路由器中（由 BrowserRouter 创建） 在浏览器路由器中 在 PersistGate 在提供者中

当从 App.js 中这样调用它时：

@withRouter
@connect((store) => 
  return 
    isAuthenticated: store.auth.isAuthenticated,
  ;
)

【参考方案1】：

因此，经过一番思考和社区帮助后，我设法将问题缩小到我的 reducer 声明。我在 index.js 中用 combineReducers 声明 reducer，而 redux-persist 说不应该。

最终 index.js 代码：

import user from './userReducer'
import auth from './authReducer'

export default (
  user, auth
)

【参考方案2】：

如果要使用默认导出需要更改：

export const configureStore = () => 
  const store = createStore(reducers, middleware);
  const persistor = persistStore(store);
  return  persistor, store ;
;

到：

export default () => 
  const store = createStore(reducers, middleware);
  const persistor = persistStore(store);
  return  persistor, store ;
;

或：

const configureStore = () => 
  const store = createStore(reducers, middleware);
  const persistor = persistStore(store);
  return  persistor, store ;
;

export default configureStore;

或者如果您不想使用默认导出更改：

import configureStore from './store';

到：

import  configureStore  from './store';

【讨论】：

谢谢，我试过了，但没有说“store”在我调用它时没有定义：@connect((store) => return isAuthenticated: store.auth.isAuthenticated, ; ) 查看更新 1