Initial state undefined in redux connected react app
<p>I have a ReactJs app which uses Redux to manage its store. My state is a complex json whose fileds can change. When i initiate  the reducers, i have to specify the initial state else when accessing it before fetching the content from server, i get 'undefined' error. Following is the example,</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//Test.jsx
class Test extends React.Component{
    componentWillMount(){
       fetchContent({
         type: SET_CONTENT
       });
    }
    render(){ 
      return(
       &lt;div&gt; {this.props.header} &lt;/div&gt;
      )
    }
    mapStateToProps(state){
       return{
         header: state.reducer1.a.b.c
       }
    }
}
export default (mapStateToProps)(Test);


//reducer1.js
export default function reducer1(state = {}, action = {}) {
  switch (action.type) {
    case SET_CONTENT:
      return Object.assign({}, action.data);
    default:
      return state;
  }
}
  
//reducer2.js
export default function reducer2(state = {}, action = {}) {
  switch (action.type) {
    case SET_SOMETHING_ELSE:
      return Object.assign({}, action.data);
    default:
      return state;
  }
}
  
//CombinedReducer.js
export default combinedReducers(Object.assign({}, {reducer1}, {reducer2}))</code></pre>
</div>
</div>
</p>

<p>Now when the component initialises for the first time, <code>state.reducer1.a.b.c</code> throws undefined because the <code>fetchContent()</code> doesnt seems to be called at this point. </p>

<p>So my question is how do i solve this issue? Is specifying the initial state in reducer the only option? like the following,</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//reducer1.js
export default function reducer1(state = { a: { b: { c: "somedata"}}}, action = {}) {
  switch (action.type) {
    case SET_CONTENT:
      return Object.assign({}, action.data);
    default:
      return state;
  }
}</code></pre>
</div>
</div>
</p>