title: How to update store state in react-redux?
body: <p>I'm working on a component in React (with Redux) that has the requirements to:</p>
  
  <ol>
  <li>Retreive data from an API endpoint.</li>
  <li>Display that data, with one field being editable.</li>
  <li>If the editable field <em>is</em> edited, it has to update the rest of the fields and send them to a different endpoint.</li>
  </ol>
  
  <p>I'm having trouble grasping how exactly I should implement the editing using the Redux metodology.</p>
  
  <p>Here is a simplified component:</p>
  
  <pre><code>class MyComponent extends Component {
    constructor(...args) {
      super(...args);
      this.props.dispatch(getDataFromEndpoint());
    }
    editField(e) {
      this.props.dispatch(editFieldAction(e.target.value));
    }
    render() {
      return (
        &lt;div&gt;
          &lt;input type="text" defaultValue={this.props.data.editableField} onChange={this.editField} /&gt;
          {
            this.props.data.uneditable.map(x =&gt; {
              return (
                &lt;span&gt;{x}&lt;/span&gt;
              );
            })
          }
        &lt;/div&gt;
        );
    }
  }
  
  const mapProps = state =&gt; {
    const { data } = state.endpointData;
    return { data };
  }
  
  export default connect(mapProps)(MyComponent);
  </code></pre>
  
  <p>Note that I've written this component as an example, it might have errors, but you should get the point. Whenever <code>this.editField</code> is called, it should update every value in <code>this.props.data.uneditable</code>.</p>
  
  <p>What is the correct way to do this?</p>