使用 react-router-dom、redux、apollo-client、connected-react-router 和 redux-persist 进行路由
Routing with react-router-dom, redux, apollo-client, connected-react-router and redux-persist
我正在尝试配置一个应用程序,我正在使用:react class 组件、redux、react-redux、apollo-client、redux-persist 和 connected-react-redux,我收到以下信息错误:“未捕获的类型错误:store.dispatch 不是函数”。
这是根减速器:
import { combineReducers } from "redux";
import { connectRouter } from "connected-react-router";
const createRootReducer = (history) => combineReducers({
rooter: connectRouter(history),
other reducers
})
export default createRootReducer
这是store.js
:
import {createStore, applyMiddleware, compose} from 'redux'
import thunk from 'redux-thunk'
import createRootReducer from './Reducers'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import { createBrowserHistory } from 'history'
import { routerMiddleware } from 'connected-react-router'
const initialState = {}
export const history = createBrowserHistory()
const middware = [thunk]
const persistConfig = {
key: 'root',
storage,
}
const rootReducer = createRootReducer(history)
const persistedReducer = persistReducer(persistConfig, rootReducer)
const store = createStore(persistedReducer,
initialState,
compose(routerMiddleware(history),applyMiddleware(...middware))
)
const persistor = persistStore(store)
export {store, persistor}
这是index.js
:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
ApolloClient,
InMemoryCache,
ApolloProvider,
} from "@apollo/client";
import { HashRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import {store, persistor, history} from './store';
import { PersistGate } from 'redux-persist/integration/react'
import { ConnectedRouter } from 'connected-react-router';
export const client = new ApolloClient({
uri: ' http://localhost:4000/',
cache: new InMemoryCache()
});
ReactDOM.render(
<React.StrictMode>
<ApolloProvider client={client}>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</PersistGate></Provider >
</ApolloProvider>
</React.StrictMode>,
document.getElementById('root')
);
React-router-dom 版本:5.3.0。反应路由器版本:5.2.1
你能帮帮我吗?
问题出在选择器上,因为它使用了一些缓存内存来记忆,而在第一次加载时,没有缓存内存。我找到了这个 .
所以我删除了选择器,并将函数移动到减速器中,选择器就是它。
我也不再使用“connected-react-router”
我正在尝试配置一个应用程序,我正在使用:react class 组件、redux、react-redux、apollo-client、redux-persist 和 connected-react-redux,我收到以下信息错误:“未捕获的类型错误:store.dispatch 不是函数”。
这是根减速器:
import { combineReducers } from "redux";
import { connectRouter } from "connected-react-router";
const createRootReducer = (history) => combineReducers({
rooter: connectRouter(history),
other reducers
})
export default createRootReducer
这是store.js
:
import {createStore, applyMiddleware, compose} from 'redux'
import thunk from 'redux-thunk'
import createRootReducer from './Reducers'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import { createBrowserHistory } from 'history'
import { routerMiddleware } from 'connected-react-router'
const initialState = {}
export const history = createBrowserHistory()
const middware = [thunk]
const persistConfig = {
key: 'root',
storage,
}
const rootReducer = createRootReducer(history)
const persistedReducer = persistReducer(persistConfig, rootReducer)
const store = createStore(persistedReducer,
initialState,
compose(routerMiddleware(history),applyMiddleware(...middware))
)
const persistor = persistStore(store)
export {store, persistor}
这是index.js
:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
ApolloClient,
InMemoryCache,
ApolloProvider,
} from "@apollo/client";
import { HashRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import {store, persistor, history} from './store';
import { PersistGate } from 'redux-persist/integration/react'
import { ConnectedRouter } from 'connected-react-router';
export const client = new ApolloClient({
uri: ' http://localhost:4000/',
cache: new InMemoryCache()
});
ReactDOM.render(
<React.StrictMode>
<ApolloProvider client={client}>
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</PersistGate></Provider >
</ApolloProvider>
</React.StrictMode>,
document.getElementById('root')
);
React-router-dom 版本:5.3.0。反应路由器版本:5.2.1
你能帮帮我吗?
问题出在选择器上,因为它使用了一些缓存内存来记忆,而在第一次加载时,没有缓存内存。我找到了这个
所以我删除了选择器,并将函数移动到减速器中,选择器就是它。
我也不再使用“connected-react-router”