Я устанавливаю проект с использованием ConnectedRouter и Redux на ReactJS, но при попытке mapStateToProps
состояние не определено.
Вот моя конфигурация - Магазин:
import { applyMiddleware, combineReducers, compose, createStore } from 'redux'
import reducers from './reducers'
import createSagaMiddleware from 'redux-saga'
import { createLogger } from 'redux-logger'
import { routerMiddleware, routerReducer } from 'react-router-redux'
import { composeWithDevTools } from 'redux-devtools-extension'
import { connectRouter } from 'connected-react-router'
import sagas from './sagas'
import ENV from '../../config/constants/env'
import createHistory from 'history/createBrowserHistory'
const { DEBUG } = ENV
export const history = createHistory()
function buildRootReducer(reducers) {
return Object.assign({}, reducers, { routing: routerReducer })
}
export const configureStore = (preloadState = {}) => {
let composeEnhancers = compose
// Middlewares
const sagaMiddleware = createSagaMiddleware()
const rMiddleware = routerMiddleware(history)
let middlewares = [rMiddleware, sagaMiddleware]
// reducers
const allReducers = buildRootReducer(reducers)
const combinedReducers = combineReducers({ router: connectRouter(history), allReducers })
// Apply these middlewares only for dev mode
if (DEBUG.ENABLED) {
middlewares = [...middlewares, createLogger({ collapsed: true })]
if (DEBUG.REDUX) {
composeEnhancers = composeWithDevTools
}
}
const store = createStore(
combinedReducers,
preloadState,
composeEnhancers(applyMiddleware(...middlewares))
)
sagaMiddleware.run(sagas)
return store
}
const Routes = ({ history, context }) => {
return (
<ConnectedRouter history={history} context={context}>
<Switch>
{Object.keys(routeConfig)
.filter(i => !routeConfig[i].hidden)
.map(i => {
const route = routeConfig[i]
return (
<Route
path={route.path}
render={() => route.render}
exact={route.exact}
key={route.path}
/>
)
})}
</Switch>
</ConnectedRouter>
)
}
- Использование в домашних условиях
const mapDispatchToProps = ({
storageActionRequest: actionsCreator.storageActionRequest
})
const mapStateToProps = ({ storage }) => ({
storageList: storage.list
})
export default connect(
mapStateToProps,
mapDispatchToProps
)(Home)
И тогда я получаю эту ошибку:
The above error occurred in the <StorageList> component:
in StorageList (at Home.js:12)
in div (at Home.js:11)
in Home (created by Context.Consumer)
in Connect(Home) (at routeConfig.js:13)
in Route (at Routes.js:16)
in Switch (at Routes.js:10)
in Router (created by ConnectedRouter)
in ConnectedRouter (created by Context.Consumer)
in ConnectedRouterWithContext (created by Context.Consumer)
in Connect(ConnectedRouterWithContext) (at Routes.js:9)
in Routes (at App.js:15)
in Provider (at App.js:14)
in App (at src/index.js:5)