title: Error: 'Objects are not valid as a React child' in a very simple redux app
body: <p>In this little Redux app i'm trying to make two very simple counters which can operate independently from each other.</p>
  
  <p>At the moment only Counter1 is connected to the store:</p>
  
  <pre><code>const App = connect(mapStateToProps, mapDispatchToProps)(Counter1);
  </code></pre>
  
  <p>And store is made up from allReducers:</p>
  
  <pre><code>const store = createStore(allReducers, composeEnchancers());
  </code></pre>
  
  <p>So, i'm getting this: </p>
  
  <blockquote>
    <p>Uncaught Error: Objects are not valid as a React child (found: object with keys {CounterReducer1, CounterReducer2}). 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 Counter1.</p>
  </blockquote>
  
  <p>However if i make this:</p>
  
  <pre><code>const store = createStore(CounterReducer1, composeEnchancers());
  </code></pre>
  
  <p>Everything starts to work fine...</p>
  
  <p>I know that in this case mistake might be very stupid, but i still can't figure out where exactly is it hiding...</p>
  
  <p>Here is my entire code:</p>
  
  <pre><code>     import React from 'react';
       import ReactDOM from 'react-dom';
       import {createStore, bindActionCreators, compose, combineReducers} from 'redux';
       import {Provider, connect} from 'react-redux';
  
  
  
  
       //REDUCERS-----------------------------------------------------------------
  
       function CounterReducer1(state=1, action){
           switch(action.type){
           case 'INCREASE1': 
               return state=state+1;
           default: 
               return state;
           }
  
       }
  
  
       function CounterReducer2(state=1, action){
           switch(action.type){
           case 'INCREASE2': 
               return state=state+10;
           default: 
               return state;
           }
  
       }
  
       const allReducers = combineReducers({
           CounterReducer1,
           CounterReducer2
       });
  
       //REDUCERS------------------------------------------------------------------
  
  
  
  
       //COMPONENT COUNTER1--------------------------------------------------------
       const Counter1 = ({ counter1, BtnClickHandler1 }) =&gt; {
           return(
               &lt;div&gt;
                   &lt;button onClick={() =&gt; BtnClickHandler1()}&gt;Counter1Button&lt;/button&gt;
  
                   &lt;h2&gt;{counter1}&lt;/h2&gt;
  
               &lt;/div&gt;
           );
  
       };
       //COMPONENT COUNTER1--------------------------------------------------------
  
  
  
  
  
       //COMPONENT COUNTER2--------------------------------------------------------
       const Counter2 = ({ counter2, BtnClickHandler2 }) =&gt; {
           return(
               &lt;div&gt;
                   &lt;button onClick={() =&gt; BtnClickHandler2()}&gt;Counter2Button&lt;/button&gt;
  
                   &lt;h2&gt;{counter2}&lt;/h2&gt;
  
               &lt;/div&gt;
           );
  
       };
       //COMPONENT COUNTER2-------------------------------------------
  
  
  
  
       //ROOT COMPONENT-----------------------------------------------------------
  
       const RootComponent = () =&gt;  {
           return (
               &lt;div&gt;
                   &lt;Counter1 /&gt;
                   &lt;Counter2 /&gt;
               &lt;/div&gt;
           );
       };
  
       //ROOT COMPONENT--------------------------------------------------------
  
  
  
  
       //CONNECTING COUNTERS TO THE STORE-----------------------------
  
       const mapStateToProps = (state) =&gt; {
           return{
               counter1: state,
               counter2: state
           };
       };
  
       const mapDispatchToProps = (dispatch) =&gt; {
           return {
               BtnClickHandler1: () =&gt; dispatch({type: 'INCREASE1'}),
               BtnClickHandler2: () =&gt; dispatch({type: 'INCREASE2'})
           };
       };
  
       const App = connect(mapStateToProps, mapDispatchToProps)(Counter1);
  
       //CONNECTING COUNTERS TO THE STORE-----------------------------
  
  
  
  
       //STORE-------------------------------------------------------------------
       const composeEnchancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
       const store = createStore(allReducers, composeEnchancers());
       //STORE-------------------------------------------------------------------
  
  
  
  
  
       //RENDERING-----------------------------------------------------------------
       ReactDOM.render(
  
           &lt;Provider store={store}&gt;
               &lt;App /&gt;
           &lt;/Provider&gt;, 
  
           document.getElementById('app'));
       //RENDERING-----------------------------------------------------------------   
  </code></pre>