Redux's combineReducers() not working with Next

Examples bug report

Example name

with-redux

Describe the bug

I am trying to expand upon this example with the use of combineReducers(). The example places reducers, actions, etc. in the store.js file for simplicity/readability. However, in a production example you may want to separate actions and reducers.

I have had no problem separating actions, but in order to separate reducers I need to make use of combineReducers(). Exporting a single reducer works perfectly, but when using the combine method it seems to forget about its initial state and not provide access to a defined state.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

reducers/teamReducer.js

const initialState = {
  team: [],
};

export default (state = initialState, action) => {
  switch (action.type) {
    case SET_TEAM:
      return Object.assign({}, state, {
        team: action.team,
      });
    default:
      return state;
  }
};

reducers/index.js

import { combineReducers } from 'redux';

import Team from './Team';

export default combineReducers({
  Team
}); // when trying to access state variables they are undefined? why?

// export default Team; **THIS WORKS - why not with combineReducers?**

store.js

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducer from './reducers';

export default function initializeStore(initialState) {
  return createStore(
    reducer,
    initialState,
    composeWithDevTools(applyMiddleware()),
  );
}

team.js

import React from 'react';
import { connect } from 'react-redux';
import { setTeam } from '../actions';

class Team extends React.Component {
    async componentDidMount() {
        const teamArray = await getTeamFromAsyncFunc();
        this.props.setTeam(teamArray);
    }

    render() {
        <div>
               {this.props.team.map .... UNDEFINED WHEN USING combineReducers()}
        </div>
    }
}

const mapStateToProps = state => ({
  routes: state.team,
});

const mapDispatchToProps = dispatch => ({
  setTeam: team => dispatch(setTeam(team)),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Team);

Expected behavior

I expect to be able to access the team array from props in the same way I can when exporting a single reducer without combineReducers().

When I try to access this.props.team after exporting with combineReducers() it returns undefined.

System information

• OS: macOS Mojave
• Browser (if applies) Chrome
• Version of Next.js: 8.0.1

[us-22]

@jskidd3 I have the same issue. how you manage to solve this.

[jskidd3]

@alanhr Have updated with the actual page now. Hopefully this will help. Thanks 😊