title: Redux reducer initial state issues
body: <p>I have a reducer that set the state for a redux-form, and also for a display-only page (not a form)...</p>
  
  <pre><code>import { LOAD_USER_SUCCESS, LOAD_USERS_SUCCESS } from '../actions/types';
  
  const INITIAL_STATE = { data: [] }
  
  export default function (state = INITIAL_STATE, action) {  
    switch(action.type) {
      case LOAD_USER_SUCCESS:
        return { ...state, data: action.data };
      case LOAD_USERS_SUCCESS:
        console.log('LOAD_USER_SUCCESS');
        return { ...state, data: action.data };
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>You can see above that I set an initial state, and I do this because otherwise the display-only page throws error before the fetch is complete: </p>
  
  <p>TypeError: Cannot read property 'map' of undefined (thrown at 'this.props.users' below)...</p>
  
  <pre><code>class Users extends React.Component {
  
    componentDidMount() {
          this.props.loadUsers();
    }
  
    render() {
  
      return (
        &lt;PageWrapper&gt;
            &lt;table className="w-full text-left table-collapse"&gt;
              &lt;thead&gt;
                &lt;tr className="text-sm text-grey-darker bg-grey-lightest"&gt;
                  &lt;TableTH name="Name" /&gt;
                  &lt;TableTH name="Email" /&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
  
              &lt;tbody&gt;
               {this.props.users.map((user, i) =&gt; (
                  &lt;UserListItem firstName={user.profile.firstName} lastName={user.profile.lastName} email={user.email} key={i} /&gt;
                ))}
              &lt;/tbody&gt;
            &lt;/table&gt;
        &lt;/PageWrapper&gt;
      );
    }
  }
  
  function TableTH(props) {
      return (
          &lt;th className="p-2"&gt;{props.name}&lt;/th&gt;
      )
  }
  
  function mapStateToProps(state, props) {  
    if(state.user.data) {
      return { users: state.user.data }
    } else {
      return {};
    }
  }
  
  export default connect(mapStateToProps, { loadUsers })(Users);  
  </code></pre>
  
  <p>But the redux-form populates with that same initial state (no content), and doesn't update when fetch is complete since it's immutable.</p>
  
  <p>If I remove the INITIAL state in the reducer, the redux-form populates perfectly but I get the 'map' error mentioned above.</p>
  
  <p>Here's the form:</p>
  
  <pre><code>let UserForm = props =&gt; {
  
    const { handleSubmit, onSubmit } = props;
  
      return (
      &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
  
              &lt;FormItem
                  label = { &lt;label htmlFor="firstName"&gt;First Name&lt;/label&gt; }
                  field = { &lt;Field name="firstName" type="text" placeholder="First name" component="input" className="w-full"/&gt;} 
              /&gt;
  
              &lt;FormItem
                  label = { &lt;label htmlFor="lastName"&gt;Last Name&lt;/label&gt; }
                  field = { &lt;Field name="lastName" type="text" placeholder="Last name" component="input" className="w-full"/&gt; }
              /&gt;
  
              &lt;FormItem
                  label = { &lt;label htmlFor="email"&gt;Email&lt;/label&gt; }
                  field = { &lt;Field name="email" type="text" placeholder="Email" component="input" className="w-full"/&gt;}
              /&gt;
  
              &lt;FormFooter
                  left={ &lt;Button href="/users" icon="fa-ban" text="Cancel" /&gt; }
                  right={ &lt;button type="submit"&gt;Save&lt;/button&gt; }
              /&gt;
  
          &lt;/form&gt;
      )
  }
  
  UserForm = reduxForm({
    form: 'userForm'
  })(UserForm)
  
  function mapStateToProps(state) {  
    return { initialValues: state.user.data }
  }
  
  UserForm = connect(mapStateToProps
  )(UserForm)
  
  export default UserForm
  </code></pre>
  
  <p>Here's where I create the store:</p>
  
  <pre><code>const store = createStore(
    reducers,
    applyMiddleware(reduxThunk)
  );
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
          &lt;App /&gt;
      &lt;/Provider&gt;,
    document.getElementById('root')
  )
  
  registerServiceWorker();
  </code></pre>
  
  <p>Here's the main reducer:</p>
  
  <pre><code>import { combineReducers } from 'redux';  
  import { reducer as formReducer } from 'redux-form';  
  import authReducer from './auth_reducer';
  import userReducer from './user_reducer';
  import calendarReducer from './calendar_reducer';
  
  const rootReducer = combineReducers({  
    auth: authReducer,
    form: formReducer,
    user: userReducer,
    calendar: calendarReducer
  });
  
  export default rootReducer; 
  </code></pre>
  
  <p>How should I change this to satisfy both pages?</p>