Getting the updated state after an action is dispatched in redux

Question

I am using react and redux.

I have a Container component defined as so:

import { connect } from 'react-redux';
import {addTag} from 'actions';
import ExpenseTagsControl from './expense_tags_control'

const mapStateToProps = (state, own_props={selected_tags:[]}) => {
    return {
        tags_list: state.tags.tags_list
    };
};


const mapDispatchToProps = (dispatch) => {
    return {
        addTag: (tag_name) => {
            dispatch(addTag(tag_name))
        }
    };
};

const AddExpenseTagsContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(ExpenseTagsControl);


export default AddExpenseTagsContainer;

The container wraps a presentational component which is defined as so:

// 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) => 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) => c !== deletedChip)
        });
    };


    chipRenderer({ text, value, isFocused, isDisabled, handleClick, handleRequestDelete }, key) {
        const style = {
            margin: '8px 8px 0 0',
            float: 'left',
            pointerEvents: isDisabled ? 'none' : undefined
        };

        return (
            <Chip key={key} style={style} onTouchTap={handleClick} onRequestDelete={handleRequestDelete}>
                <Avatar size={24} icon={<Tag />} />
                {text}
            </Chip>
        );
    };

    render() {
        return (
            <ChipInput
                hintText="Tags"
                value={this.state.chips}
                onRequestAdd={(chip) => this.handleAdd(chip)}
                onRequestDelete={(deletedChip) => 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")}
            />);
    };
};

ExpenseTagsControl.PropTypes = {
    tags_list: PropTypes.array.isRequired,
    addTag: PropTypes.func.isRequired,
    value: PropTypes.array.isRequired,
    onChange: PropTypes.func.isRequired
};

export default ExpenseTagsControl;

The presentational component above, maintains a state, which indicates the chips that have been selected.

The ChipInput 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.

My Problem

The id of the newly added chip is assigned once the addTag() action is dispatched. How do I get the value of the result of the action that was just dispatched?

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.

Answer 1

From what I understand, the OP's problem is how to dispatch an action to modify the redux store and at the same time update the component's local state.

Edit: added a working example

const initialState = {
  tags: ['hello', 'hi', 'howdy']
}

function reducer(state = {}, action) {
  switch (action.type) {
    case 'ADD_TAG':
      return {
        ...state,
        tags: [
          ...state.tags,
          action.payload.tag
        ]
      }
    default:
      return state;
  }
}

const store = Redux.createStore(reducer, initialState);

const addTag = (tag) => ({
  type: 'ADD_TAG',
  payload: {
    tag
  }
})

class Chips extends React.Component {
    constructor(props) {
      super(props);
      this.chipToAdd = false;
      this.state = {
        chips: []
      }
      this.handleAdd = this.handleAdd.bind(this);
    }

    componentWillReceiveProps(nextProps) {
      console.log(this.chipToAdd);
      if (this.chipToAdd) {
        this.setState({
          chips: [...this.state.chips, this.chipToAdd]
        }, (this.chipToAdd = false));
      }
    }

    handleAdd(chip) {
      if (this.props.tags.filter(tag => tag === chip).length === 0) {
        this.chipToAdd = chip;
        this.props.addTag(chip);
      } else {
        if (this.state.chips.filter(existingChip => existingChip === chip).length === 0) {
          this.setState({
            chips: [...this.state.chips, chip]
          });
        }
      }
    }

    render() {
        return <div >
          < h3 > Tags added in component 's chip state</h3>
			<ul>
				{this.state.chips.map((chip, index) => <li key={index}>{chip}</li>)}
			</ul>
			<hr />
			<h3>Tags in Redux Store</h3>
			{this.props.tags.map(
				(tag, index) => <li key={index}>
					{tag} <button onClick={() => this.handleAdd(tag)}>Add</button>
				</li>
			)}
			<button onClick={() => this.handleAdd('
        new tag - ' + Math.floor((Math.random() * 100) + 1))}>Add a chip with new tag</button>
		</div>
	}
}

const mapStateToProps = ({ tags = [] }) => ({ tags });
const ConnectedChips = ReactRedux.connect(mapStateToProps, { addTag })(Chips);

class App extends React.Component {
	render() {
		return <div>
			<h1>React/Redux Demo</h1>
			<ConnectedChips />
		</div>
	}
}

const Provider = ReactRedux.Provider;

ReactDOM.render(
    <Provider store={store}><App /></Provider>,
    document.getElementById('
        root ')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/redux@3.6.0/dist/redux.min.js"></script>
<script src="https://unpkg.com/react-redux@4.4.6/dist/react-redux.min.js"></script>
<div id="root"></div>

Answer 2

If what I understand is correct, you might want something like this:

class ExpenseTagsControl extends React.Component {

    // ...


    /*
     * assuming your reducers are working fine and 'addTag'
     * has updated global 'state.tags.tags_list'
     */
    componentWillReceiveProps(nextProps) {
        this.setState({ chips: this.nextProps.tags_list });
    }

    // ...
}

NB: You might need to optimize calling setState inside componentWillReceiveProps based on some conditions to avoid unnecessary re-render.