Redux combineReducers with multiple files - making simple mistake - ecmascript-6

Question

I'm trying to set up a pattern for combining reducers from multiple files as per #gaearon's answer (https://github.com/reduxjs/redux/issues/609#issuecomment-133903294), but am making a simple mistake, and am unable to figure out what it is. Having some brain block on this one... :\
Getting the following error:
Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.
My Code:
containers/score/reducers.js
export const goals = (state = 0, action) =>
action.type === types.UPDATE_GOALS ? action.payload : state
export const points = (state = 0, action) =>
action.type === types.UPDATE_POINTS ? action.payload : state
containers/time/reducers.js
export const minutes = (state = 0, action) =>
action.type === types.UPDATE_MINUTES ? action.payload : state
export const seconds = (state = 0, action) =>
action.type === types.UPDATE_SECONDS ? action.payload : state
containers/index.js
import * as score from './score'
import * as time from './time'
export default Object.assign({}, score, time)
store/configureStore.js
import { createStore, combineReducers } from 'redux'
import reducers from '../containers'
const configureStore = initialState =>
createStore(combineReducers(reducers), initialState)
export default configureStore
components/provider.js
import configureStore from '../store/configureStore'
const initialState = { minutes: 55 }
const store = configureStore(initialState)
On large code bases, it won't be enough to just directly import the reducers to the configureStore file. You have these enormous state trees that require hundreds of reducer files, and many reducers import other reducers from other files. Basically I'm asking how to manage a deeply nested state tree of reducers, and combine them one after another using import and export until they reach the root combineReducers function.

Answer 1

If the object passed inside combineReducer is empty or invalid, you'll see that error.
I always structure my reducers this way,
I don't spin off separate export for every action, consolidate them into one export and manage with switch cases.
Each reducer's initialState is defined within the reducer for easy code management.
I've rewritten your code a bit:
containers/score/reducers.js
const initialState = {
goals: 0,
points: 0
};
const scoreReducer = (state = initialState, action) => {
switch (action.type) {
case UPDATE_GOALS:
return { ...state, goals: action.payload };
case UPDATE_POINTS:
return { ...state, points: action.payload };
default:
return state;
}
};
export default scoreReducer;
containers/time/reducers.js
const initialState = {
minutes: 0,
seconds: 0
};
const timeReducer = (state = initialState, action) => {
switch (action.type) {
case UPDATE_MINUTES:
return { ...state, minutes: action.payload };
case UPDATE_SECONDS:
return { ...state, seconds: action.payload };
default:
return state;
}
};
export default timeReducer;
containers/index.js
import score from './score';
import time from './time;
import { combineReducers } from "redux";
const rootReducer = combineReducers({
score,
time
});
export default rootReducer;
And I don't complicate more after this - I just pass the provider and store to my main wrapper component after defining the combined reducers:
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import rootReducer from './container';
import history from './history';
import App from './App';
const store = createStore(
rootReducer
);
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<App />
</Router>
</Provider>,
document.getElementById('root')
);
I really think structuring this way would solve your problem, please try.

Answer 2

It seems like score and time folders don't contain index.js files.
Try to add them or change your containers/index.js file:
import * as score from './score/reducers.js'
import * as time from './time/reducers.js'