redux state is undefined при использовании react-router

358
06 января 2018, 04:34

Пытаюсь подключить 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);
READ ALSO
Не работают touch-события на android

Не работают touch-события на android

Доброго времени суток! Есть такой кодДолжен по касанию на экран телефона менять стиль футеру, от чего тот должен появится

280
Изменение html На странице с помощью nodejs

Изменение html На странице с помощью nodejs

Подключаю смартфон по usb, пишу порты для google devtoolsПолучаю открытые вкладки через http://localhost:9222/json

260
Перестала работать прокрутка в Chrome и Opera

Перестала работать прокрутка в Chrome и Opera

На страничке должна работать плавная прокрутка по странице при клике на определенный пункт менюРеализовано с помощью smoothscroll

301
Переключение между картинками c помощью jquery

Переключение между картинками c помощью jquery

Как добиться переключения между 4 картинками, так чтобы при клике на одну из них менялась главная картинка?

435