Understanding combineReducers : <p>New to react and redux so playing around with some very simple code to see how it all works. 
When I try passing in a combineReducers method to a redux store then I get an error. If I remove the combinedReducers and pass the reducer in directly to the store all works fine. </p>

<pre><code>let store = createStore(rootReducer);
</code></pre>

<p>Error </p>

<blockquote>
  <p>Uncaught Error: Objects are not valid as a React child (found: object
  with keys {reducer}). If you meant to render a collection of children,
  use an array instead or wrap the object using createFragment(object)
  from the React add-ons. Check the render method of App.</p>
</blockquote>

<p>Why do I get an error when I use combineReducers ? What if I wanted to add more reducers I presume thats what combineReducers is there for ? </p>

<p><strong>main.js</strong></p>

<pre><code>import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';

import App from './components/app';

let reducer = (state=0, action) =&gt; {
  switch (action.type) {
    case 'INCREASE': 
            return state+1
    case 'DECREASE': 
            return state-1
    default: return state
  }
}

const rootReducer = combineReducers({
    reducer:reducer
});

let store = createStore(rootReducer);

ReactDOM.render(
  &lt;Provider store={store}&gt;
    &lt;App /&gt;
  &lt;/Provider&gt;
  , document.querySelector('.container'));
</code></pre>

<p><strong>//app.js</strong></p>

<pre><code>import React, { Component } from 'react';
import {connect} from 'react-redux';

class App extends Component {
  render() {
        let {number, increase, decrease} = this.props
        return(
                &lt;div&gt;
              &lt;div&gt;{number}&lt;/div&gt;
              &lt;button onClick={e=&gt;increase()}&gt;+&lt;/button&gt;
              &lt;button onClick={e=&gt;decrease()}&gt; - &lt;/button&gt;
            &lt;/div&gt;
            );
     }
}

let mapStateToProps = state =&gt; ({
  number: state
})

let mapDispatchToProps = dispatch =&gt; ({
  increase: () =&gt; dispatch({type: 'INCREASE'}),
  decrease: () =&gt; dispatch({type: 'DECREASE'})
});

export default connect(mapStateToProps, mapDispatchToProps)(App);
</code></pre>
