title: React Native + Redux: How to render <ListView/> upon clicking a button?
body: <p>I have two components: <code>AddingAnimalPanel.js</code> and <code>AnimalList.js</code>. I was trying trying to do the following: </p>
  
  <p>In the <code>AddingAnimalPanel.js</code>, I have a button where once it is clicked, it calls a function <code>_addAnimal()</code> and that updates the state via redux, and the updated state gets passed into <code>AnimalList.js</code> and list the state via <code>&lt;ListView/&gt;</code>. </p>
  
  <p>But I am getting an error: <code>Cannot read property 'rowIdentities' of undefined</code> and I didn't define initial state for the <code>animalData</code>. So I tried defining the initial state property <code>animalData</code> as an array, yet I still got an error: <code>Cannot read property 'length' of undefined</code>. </p>
  
  <p>I can't seem to figure out what's wrong. What am I doing incorrectly? </p>
  
  <p><strong>Here is my code:</strong></p>
  
  <p>In <code>AddingAnimalPanel.js</code>:</p>
  
  <pre><code>  _addAnimal() {
      var animals = [{animal: 'bird'}, {animal: 'cat'}, {animal: 'dog'}]
  
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) =&gt; r1 !== r2});
      var animalData = ds.cloneWithRows(animals)
  
      this.props.uploadAnimalData(animalData) //Calling action creator
    }
  </code></pre>
  
  <p>In action creators: </p>
  
  <pre><code>export const uploadAnimalData = (animalData) =&gt; {
    return {
      type: actionTypes.UPLOAD_ANIMAL_DATA,
      animalData: animalData,
    }
  }
  </code></pre>
  
  <p>And in reducer:</p>
  
  <pre><code>const DEFAULT_STATE = {
   //Tried also both animalData:[] and animalData:{} but still got the length error
  }
  
  export default function(state = DEFAULT_STATE, action) {
    switch(action.type) {
  
      case actionTypes.UPLOAD_ANIMAL_DATA:
        return {
          ...state,
          animalData: action.animalData
        }
      default:
        return state
    }
  }
  </code></pre>
  
  <p>And redux works correctly and props get passed down to <code>AnimalList.js</code>:</p>
  
  <pre><code>  _renderRow(rowData){
      return (
        &lt;AnimalListRow rowData={rowData} {...this.props}/&gt;
      )
    }
  
    render() {
  
      return (
        &lt;View style={styles.container}&gt;
          &lt;ListView
            dataSource={this.props.animalData} //ListView is causing the error
            renderRow={this._renderRow}
          /&gt;
        &lt;/View&gt;
      )
    }
  }
  </code></pre>
  
  <p><strong>EDIT - ADDITIONAL CODE</strong></p>
  
  <p>This is my current set up for redux. </p>
  
  <p>Reducer: </p>
  
  <pre><code>const DEFAULT_STATE = {
  
  }
  
  export default function(state = DEFAULT_STATE, action) {
    switch(action.type) {
  
      case actionTypes.UPLOAD_ANIMAL_DATA:
        return {
          ...state,
          animalData: action.animalData
        }
      default:
        return state
    }
  }
  
  export const getAnimalData = (state) =&gt; ({
    animalData: state.animalData,
  })
  </code></pre>
  
  <p>Using <code>connect</code> from react-redux inside a separate file called <code>index.js</code>, this is how <code>animalData</code> is being passed into <code>AnimalList.js</code> :</p>
  
  <pre><code>// @flow
  import AnimalList from './AnimalList'
  import { connect } from 'react-redux'
  import * as actions from './actions'
  import {
    getAnimalData,
  } from '../../reducers/rootReducer'
  
  const mapStateToProps = (state) =&gt; ({
    ...getAnimalData(state),
  })
  
  export default connect(mapStateToProps, actions)(AnimalList)
  </code></pre>