Responsive to component, reduction state changes ... but no update for component?

Question

I am creating a React / Redux interface for a multi-channel chat application. I'm having trouble getting some React components to re-render after a state change when using redux , react-redux and redux-thunk .

I believe my gearboxes do not mutate, and I signed up for react-redux connect . When I launch the application and look at the browser console, I see the initial visualization of the component (i.e., with the initial, empty state), and then the state change (caused by sending actions to index.js ) .... Then I would expect the component will be re-displayed using the new details, but this will not happen.

I put the repo here: https://github.com/mattmoss/react-redux-no-update

node_modules not in the repo, so dependencies are loaded first to run ( yarn is yarn ), then npm start .

Some excerpts (see full source in the repo):

reducers/channelList.js

 import * as c from '../actions/constants'; export default function channelList(state = [], action) { switch (action.type) { case c.FETCH_CHANNELS_SUCCESS: return action.channels; default: return state; } } 

actions/channelActions.js

 export function fetchChannels() { return (dispatch) => { return ChannelApi.allChannels() .then(channels => dispatch(fetchChannelsSuccess(channels))) .catch(error => { throw(error); }); }; } export function fetchChannelsSuccess(channels) { return { type: c.FETCH_CHANNELS_SUCCESS, channels }; } 

components/ChannelListView.js

 class ChannelListView extends React.Component { render() { const { channels, current, onSelect } = this.props; console.log("channels:", channels, "current:", current); return ( <ListGroup> {channels.map(channel => <ListGroupItem key={channel.id} active={channel.id === this.props.current} onClick={onSelect(channel.id)} > <strong>#{channel.name}</strong> </ListGroupItem> )} </ListGroup> ); } } export default ChannelListView; 

containers/ChannelList.js

 import ChannelListView from '../components/ChannelListView'; const mapStateToProps = (state, ownProps) => { return { channels: state.channelList, current: state.currentChannel }; }; const mapDispatchToProps = (dispatch) => { return { onSelect: (id) => () => {} }; }; export default connect(mapStateToProps, mapDispatchToProps)(ChannelListView); 

App.js

 class App extends Component { render() { return ( <Grid> <Row> <Col> <h1>Channels</h1> <ChannelList /> </Col> </Row> </Grid> ); } } 

index.js

 const store = configureStore(); store.dispatch(fetchChannels()); ReactDOM.render( <Provider store={configureStore()}> <App /> </Provider>, document.getElementById('root') ); 

store/configureStore.js

 import { createStore, applyMiddleware } from 'redux'; import rootReducer from '../reducers/rootReducer'; import thunk from 'redux-thunk'; import logger from 'redux-logger'; export default function configureStore() { return createStore( rootReducer, applyMiddleware(thunk, logger) ); } 

Answer 1

I am not 100% as I am still relatively new to Response. But look at the index.js script.

 // You configure the store, then dispatch the fetchChannels action const store = configureStore(); store.dispatch(fetchChannels()); ReactDOM.render( // But here, you're recreating the store again, which I think will re-initialise an empty store // Change this to use the `store` variable from above. <Provider store={configureStore()}> <App /> </Provider>, document.getElementById('root') );