Пытаюсь подключить react router к приложению с redux. При рендере компонента из route, значение из state.lists = indefined, хотя в redux-devtools значение имеется. До использования роутера все работало.
https://i.stack.imgur.com/IbD8T.jpg
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import { render } from 'react-dom'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import configureStore from './store/configureStore'
import { Route } from 'react-router-dom'
//import routes from './routes'
import { ConnectedRouter as Router, routerMiddleware, push } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'
const history = createHistory();
const middleware = routerMiddleware(history);
const store = configureStore(middleware);
ReactDOM.render(
<Provider store={store}>
<Router history={history} >
<Route path="/" component={App}/>
</Router>
</Provider>, document.getElementById('root'));
registerServiceWorker();
store.subscribe(() => {
console.log('Store has changed')
})
configureStore.js
import { createStore, applyMiddleware, combineReducers } from 'redux'
import rootReducer from '../reducers'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import { routerReducer } from 'react-router-redux'
export default function configureStore(middleware) {
const reducers = combineReducers({ rootReducer, router: routerReducer })
const store = createStore(reducers, composeWithDevTools(applyMiddleware(thunk,promise(), middleware )))
if (module.hot) {
module.hot.accept('../reducers', () => {
const nextRootReducer = require('../reducers')
store.replaceReducer(nextRootReducer)
})
}
return store
}
App.js
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import SidebarContainer from './aside/SidebarContainer'
const drawerWidth = 240; //Sidebar have it too
const styles = theme => ...;
class App extends React.Component {
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<div className={classes.appFrame}>
<AppBar className={classNames(classes.appBar, classes[`appBar-left`])}>
<Toolbar>
</Toolbar>
</AppBar>
<SidebarContainer/> //ошибка здесь
<main className={classes.content}>
</main>
</div>
</div>
);
}
}
App.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(App);
SidebarContainer.js
import React, { Component } from 'react'
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import Sidebar from './Sidebar'
import {addList,fetchLists,setCurrentList} from '../../actions/'
class SidebarContainer extends Component {
constructor(props){
super(props);
this.state = {
}
}
addList(list){
this.props.onAddList(list)
}
componentWillMount(){
this.props.onFetchLists()
}
render(){
console.log(this.props.lists)
return (
<Sidebar lists={this.props.lists} onBtnAddClick={this.addList.bind(this)}/>
)
}
}
function mapStateToProps(state){
return {
lists: state.lists,
currentList: state.currentList
}
}
function mapDispatchToProps(dispatch){
return {
onAddList: (newList) => {
dispatch(addList(newList))
},
onFetchLists: () => {
dispatch(fetchLists())
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(SidebarContainer);
Как развивать веб-проекты в 2026 году: технологии, контент E-E-A-T и факторы доверия
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники