title: Getting the updated state after an action is dispatched in redux
body: <p>I am using react and redux.</p>
  
  <p>I have a Container component defined as so:</p>
  
  <pre><code>import { connect } from 'react-redux';
  import {addTag} from 'actions';
  import ExpenseTagsControl from './expense_tags_control'
  
  const mapStateToProps = (state, own_props={selected_tags:[]}) =&gt; {
      return {
          tags_list: state.tags.tags_list
      };
  };
  
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          addTag: (tag_name) =&gt; {
              dispatch(addTag(tag_name))
          }
      };
  };
  
  const AddExpenseTagsContainer = connect(
    mapStateToProps,
    mapDispatchToProps
  )(ExpenseTagsControl);
  
  
  export default AddExpenseTagsContainer;
  </code></pre>
  
  <p>The container wraps a presentational component which is defined as so:</p>
  
  <pre><code>// expense_tags_control.js
  import React, {Component, PropTypes} from 'react';
  import ChipInput from 'material-ui-chip-input';
  import Chip from 'material-ui/Chip';
  import Avatar from 'material-ui/Avatar';
  import Tag from 'common/svg_icons/tag';
  import AutoComplete from 'material-ui/AutoComplete'
  
  import _ from 'underscore';
  
  
  
  class ExpenseTagsControl extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
              chips: []
          };
      };
  
      handleAdd(chip) {
  
            // If the chip does not already exist, add it. the id here will be a dummy value that is not there in the tags_list
          if (!(_.contains( _.map(this.props.tags_list, (tag) =&gt; tag.id), chip.id))) {
              this.props.addTag(chip.name);
          }
  
            // This is wrong.     
          this.setState({
              chips: [...this.state.chips, chip]
          });
      };
  
      handleDelete(chip) {
          this.setState({
              chips: this.state.chips.filter((c) =&gt; c !== deletedChip)
          });
      };
  
  
      chipRenderer({ text, value, isFocused, isDisabled, handleClick, handleRequestDelete }, key) {
          const style = {
              margin: '8px 8px 0 0',
              float: 'left',
              pointerEvents: isDisabled ? 'none' : undefined
          };
  
          return (
              &lt;Chip key={key} style={style} onTouchTap={handleClick} onRequestDelete={handleRequestDelete}&gt;
                  &lt;Avatar size={24} icon={&lt;Tag /&gt;} /&gt;
                  {text}
              &lt;/Chip&gt;
          );
      };
  
      render() {
          return (
              &lt;ChipInput
                  hintText="Tags"
                  value={this.state.chips}
                  onRequestAdd={(chip) =&gt; this.handleAdd(chip)}
                  onRequestDelete={(deletedChip) =&gt; this.handleDelete(deletedChip)}
                  fullWidth={true}
                  dataSourceConfig={{ text: 'name', value: 'id' }}
                  dataSource={this.props.tags_list}
                  chipRenderer={this.chipRenderer}
                  openOnFocus={false}
                  filter={AutoComplete.fuzzyFilter}
                  onRequestDelete={console.log("Deleted")}
              /&gt;);
      };
  };
  
  ExpenseTagsControl.PropTypes = {
      tags_list: PropTypes.array.isRequired,
      addTag: PropTypes.func.isRequired,
      value: PropTypes.array.isRequired,
      onChange: PropTypes.func.isRequired
  };
  
  export default ExpenseTagsControl;
  </code></pre>
  
  <p>The presentational component above, maintains a state, which indicates the chips that have been selected.</p>
  
  <p>The <a href="https://github.com/TeamWertarbyte/material-ui-chip-input" rel="nofollow noreferrer">ChipInput</a> component allows you to select chips which are objects with an id, and a name,  defined from a pre-existing data source. The component also allows you to add a new chip by typing in the name. If the typed in name does not exist in the data source, it is added to the data source.</p>
  
  <p><strong>My Problem</strong></p>
  
  <p>The id of the newly added chip is assigned once the <code>addTag()</code> action is dispatched. How do I get the value of the result of the action that was just dispatched?</p>
  
  <p>I thought about working around this by maintaining the state of the ChipInput in the global state, and manipulate the global state upon dispatching the addTag() action. But that feels like too much overhead.</p>