title: React/Redux search filter update app state as you type
body: <p>I'm trying to create a search filter where the app state gets updated as you type your search query in the input field. So far in my component, I'm being able to view the initial app state. </p>
  
  <p>In my reducer I'm doing a check to see if the search query matches any of the animals - and then i update the app state accordingly (by filtering out the unmatched objects). The checking seems to be working fine but its not rendering to screen.</p>
  
  <p>EDIT:
  It now narrows down the search by updating the state BUT i need a way to go back up the app state as I delete characters from the search field. Any idea how?</p>
  
  <p>Action creator:</p>
  
  <pre><code>export const FETCH_DATA = 'FETCH_DATA'
  export function search(data){
      return {
          type: FETCH_DATA,
          payload: data
      }
  }
  </code></pre>
  
  <p>Reducer:</p>
  
  <pre><code>import { FETCH_DATA } from '../actions/index';
  var _ = require('lodash');
  
  const initialState = [
        {
          "animal": "Heron, giant"
        }, {
          "animal": "Lizard"
        }, {
          "animal": "Blesbok"
        }, {
          "animal": "Ibex"
        }, {
          "animal": "Pigeon, wood"
        }, {
          "animal": "Ground monitor"
        }
  ]
  
  export default function(state = initialState, action){
      switch (action.type){
          case FETCH_DATA:
          const {payload} = action
              state = _.filter(state, function(o){
                return o.animal.toLowerCase().includes(payload.toLowerCase());
              })
              return state;
          default:
              return state;
      }
  
  }
  </code></pre>
  
  <p>CombineReducer:</p>
  
  <pre><code>import { combineReducers } from 'redux';
  import SearchReducer from './reducer_search';
  
  const rootReducer = combineReducers({
    animals: SearchReducer
  });
  
  export default rootReducer;
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {connect} from 'react-redux';
  import {bindActionCreators} from 'redux';
  import {search} from '../actions/index';
  
  class Search extends Component {
      render() {
          //console.log(this.props.data)
          return (
              &lt;div&gt;
                  &lt;div className="form-group"&gt;
                      &lt;input className="form-control" onChange={(e)=&gt; this.props.search(e.target.value)} /&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
  //conditional rendering
                      &lt;ul&gt;
                      {
                          this.props.data.filtered.length == 0 ? 
                          this.props.data.animals.map(item =&gt; {
                              return &lt;li&gt;{item.animal}&lt;/li&gt;
                          }) :
                          this.props.data.filtered.map(item =&gt; {
                              return &lt;li&gt;{item.animal}&lt;/li&gt;
                          })
                      }
                    &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
    }
  }
  
  function mapStateToProps(state){
      return {data : state.animals}
  }
  
  //action creator
  function mapDispatchToProps(dispatch) {
      return bindActionCreators({search}, dispatch);
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Search);
  </code></pre>