首页 文章

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

提问于
浏览 次
0

嗨，我正在尝试使用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')
);

UPDATE 1

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

组件中出现上述错误：路由中的Connect（App）（由Route创建）（由withRouter（Connect（App））创建）在BrowserRouter中的路由器（由BrowserRouter创建）中的withRouter（Connect（App））中PersistGate in Provider

从App.js调用它时：

@withRouter
@connect((store) => {
  return {
    isAuthenticated: store.auth.isAuthenticated,
  };
})
javascript react-redux redux-persist

2 回答

  • 0

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

    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';
    回复于
  • 2

    因此，经过一些思考和社区帮助，我设法将问题缩小到我的减速器声明 . 我使用combineReducers在index.js中声明了reducer，而redux-persist则说它不应该 .

    最终的index.js代码：

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

export default ({
  user, auth
})
    回复于

相关问题