我在react-redux和redux-persist设置上遇到以下错误:
组件中出现上述错误:路由中的Connect(App)(由Route创建)(由withRouter(Connect(App))创建)在BrowserRouter中的路由器(由BrowserRouter创建)中的withRouter(Connect(App))中PersistGate in Provider
我有这样设置:
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')
);
App.js
import React from 'react'
import { withRouter, Switch, Route } from 'react-router-dom'
import { connect } from 'react-redux'
...
@withRouter
@connect((store) => {
return {
isAuthenticated: store.auth.isAuthenticated,
};
})
export default class App extends React.Component {
render() {
...
}
}
UPDATE 1
完整的控制台日志
UPDATE 2
这是宣布减速器的正确方法吗?没有redux-persist,它工作正常
authReducer.js
export default function reducer(state = {
isAuthenticated: false
}, action) {
...
}
UPDATE 3
REHYDRATE控制台日志
UPDATE 4
index.js(在reducers文件夹中)
import { combineReducers } from 'redux';
import user from './userReducer';
import auth from './authReducer';
export default combineReducers({
user,
auth
})
1 回答
所以问题是不应该同时使用combineReducers和persistCombineReducers . 类似的情况可以在这里找到https://github.com/rt2zz/redux-persist/issues/516