Uncaught TypeError: history.listen is not a function
zhangwei900808 opened this issue · 1 comments
zhangwei900808 commented
I used redux-persist in my project but there is a error, how can I resolve it?
store.js
import {createStore, combineReducers, applyMiddleware} from 'redux'
import thunkMiddleware from 'redux-thunk'
import logger from 'redux-logger'
import {routerReducer, routerMiddleware, push} from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/es/storage' // default: localStorage if web, AsyncStorage if react-native
import reducers from '../reducers'
const history = createHistory();
const historyRouterMiddleware = routerMiddleware(history);
const middleWares = [thunkMiddleware, historyRouterMiddleware,logger];
const config = {
key: 'root', // key is required
storage, // storage is now required
};
let comReducers = combineReducers({
...reducers,
router: routerReducer
});
const persistReducers = persistReducer(config, comReducers);
export default function configureStore () {
let store = createStore(persistReducers, applyMiddleware(...middleWares));
let persistor = persistStore(store);
return { persistor, store }
}
app.js
import React from 'react'
import {Provider} from 'react-redux'
import {ConnectedRouter} from 'react-router-redux'
import {matchRoutes, renderRoutes} from 'react-router-config'
import {Switch} from 'react-router-dom'
import { PersistGate } from 'redux-persist/es/integration/react'
import configureStore from './store'
import routes from './router'
const { persistor, store } = configureStore();
const onBeforeLift = () => {
// take some action before the gate lifts
};
const App = () => (
<Provider store={store}>
<PersistGate
loading={<div />}
persistor={persistor}>
<ConnectedRouter history={history}>
<Switch>
{renderRoutes(routes)}
</Switch>
</ConnectedRouter>
</PersistGate>
</Provider>
);
export default App
zhangwei900808 commented
I had resolve my problem ,is my bad .
import React from 'react'
import {Provider} from 'react-redux'
import {ConnectedRouter} from 'react-router-redux'
import {matchRoutes, renderRoutes} from 'react-router-config'
import {Switch} from 'react-router-dom'
import { PersistGate } from 'redux-persist/es/integration/react'
import createHistory from 'history/createBrowserHistory'
const history = createHistory();
import configureStore from './store'
import routes from './router'
const { persistor, store } = configureStore();
const onBeforeLift = () => {
// take some action before the gate lifts
};
const App = () => (
<Provider store={store}>
<PersistGate
loading={<div />}
persistor={persistor}>
<ConnectedRouter history={history}>
<Switch>
{renderRoutes(routes)}
</Switch>
</ConnectedRouter>
</PersistGate>
</Provider>
);
export default App
when I add const history = createHistory(); in app.js it worked! :)