无法让 React-redux 与 redux-persist 一起工作
Can't get React-redux to work with redux-persist
您好,我正在尝试使用 react-redux 设置 redux-persist,但我无法让它工作。我收到以下错误:
TypeError: _store2.default is not a function [Learn More] 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 的回复,我现在得到:
The above error occurred in the component:
in Connect(App) (created by Route)
in Route (created by withRouter(Connect(App)))
in withRouter(Connect(App))
in Router (created by BrowserRouter)
in BrowserRouter
in PersistGate
in Provider
从App.js这样调用它时:
@withRouter
@connect((store) => {
return {
isAuthenticated: store.auth.isAuthenticated,
};
})
如果您想使用默认导出,您需要更改:
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';
因此,经过一番思考和社区帮助后,我设法将问题缩小到我的 reducer 声明。我在 index.js 中用 combineReducers 声明了 reducer,而 redux-persist 说它不应该。
最终index.js代码:
import user from './userReducer'
import auth from './authReducer'
export default ({
user, auth
})
您好,我正在尝试使用 react-redux 设置 redux-persist,但我无法让它工作。我收到以下错误:
TypeError: _store2.default is not a function [Learn More] 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 的回复,我现在得到:
The above error occurred in the component: in Connect(App) (created by Route) in Route (created by withRouter(Connect(App))) in withRouter(Connect(App)) in Router (created by BrowserRouter) in BrowserRouter in PersistGate in Provider
从App.js这样调用它时:
@withRouter
@connect((store) => {
return {
isAuthenticated: store.auth.isAuthenticated,
};
})
如果您想使用默认导出,您需要更改:
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';
因此,经过一番思考和社区帮助后,我设法将问题缩小到我的 reducer 声明。我在 index.js 中用 combineReducers 声明了 reducer,而 redux-persist 说它不应该。
最终index.js代码:
import user from './userReducer'
import auth from './authReducer'
export default ({
user, auth
})