title: Update component when the store changes
body: <p>I'm trying to update a component based on store updates, the objective of that is, when I click on a table item, I want to update the form buttons to edit form, and Edit the table item.</p>
  
  <p><a href="https://i.stack.imgur.com/nuaek.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nuaek.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/p4vGW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p4vGW.png" alt="enter image description here"></a></p>
  
  <p>My source code:</p>
  
  <p>I have an action which updates <code>currentUser</code>. <code>currentUser</code> is the user I want to update</p>
  
  <p><strong><em>src/actions/user.js</em></strong></p>
  
  <pre><code>export const updateCurrentUserSuccess = (currentUser) =&gt; {
      return {
          type: UPDATE_CURRENT_USER,
          currentUser
      }
  }
  
  export const updateCurrentUser = (id) =&gt; {
      return (dispatch) =&gt; {
          return axios.get(`${apiUrl}/users/${id}`)
              .then(response =&gt; {
                  console.log(response.data.data)
                  dispatch(updateCurrentUserSuccess(response.data.data))
              })
              .catch(error =&gt; {
                  throw (error);
              });
      };
  };
  </code></pre>
  
  <p>my currentUserReducer:
  <strong><em>src/reducers/currentUserReducer.js</em></strong></p>
  
  <pre><code>import { UPDATE_CURRENT_USER } from '../constants/ActionTypes';
  
  const initialState = {
      currentUser: [],
  }
  
  export default function userReducer(state = initialState, action) {
      switch (action.type) {
          case UPDATE_CURRENT_USER:
              return action.currentUser;
          default: 
              return state;
      }
  }
  </code></pre>
  
  <p>now my components:</p>
  
  <p>my NewUser form:
  <strong><em>src/components/NewUser.js</em></strong></p>
  
  <pre><code>    import React, { Component } from 'react';
      import { Store } from '../store'
  
      class NewUser extends Component {
          state = {
              id: '',
              name: '',
              cpfcnpj: '',
              isEdit: false
          };
  
          componentDidMount(){
              this.handleUserChange()
          }
  
          handleInputChange = e =&gt; {
              this.handleUserChange();
              this.setState({
                  [e.target.name]: e.target.value
              });
          };
  
          handleSubmit = e =&gt; {
              e.preventDefault();
              if (!this.state.isEdit) {
                  if (this.state.name.trim() &amp;&amp; this.state.cpfcnpj.trim()) {
                      this.props.onAddUser(this.state);
                      this.handleReset();
                  }
              } else {
                  if (this.state.name.trim() &amp;&amp; this.state.cpfcnpj.trim() &amp;&amp; this.state.id !== '') {
                      this.props.onEdit(this.state);
                      this.handleReset();
                  }
              }
  
          };
  
          handleReset = () =&gt; {
              Store.getState().currentUser = []
              this.setState({
                  id: '',
                  name: '',
                  cpfcnpj: '',
                  isEdit: false
              });
          };
  
          handleUserChange() {
              console.log('store', Store.getState().currentUser._id);
              if (Store.getState().currentUser._id !== undefined) {
                  this.setState({
                      id: Store.getState().currentUser._id,
                      name: Store.getState().currentUser.name,
                      cpfcnpj: Store.getState().currentUser.cpfcnpj,
                      isEdit: true
                  });
              }
          }
  
          render() {
              return (
                  &lt;div&gt;
                      &lt;form className="form-inline" onSubmit={this.handleSubmit}&gt;
                          &lt;div className="form-group margin-right"&gt;
                              &lt;input
                                  type="text"
                                  placeholder="Name"
                                  className="form-control"
                                  name="name"
                                  onChange={this.handleInputChange}
                                  value={this.state.name}
                              /&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group margin-right"&gt;
                              &lt;input
                                  type="text"
                                  placeholder="CPF/CNPJ"
                                  className="form-control"
                                  name="cpfcnpj"
                                  onChange={this.handleInputChange}
                                  value={this.state.cpfcnpj}&gt;
                              &lt;/input&gt;
                          &lt;/div&gt;
                          &lt;div className="form-group"&gt;
                              &lt;button type="submit" className={this.state.isEdit ? "btn btn-success margin-right hidden" : "btn btn-success margin-right"}&gt;
                                  &lt;span className="glyphicon glyphicon-plus" aria-hidden="true"&gt;&lt;/span&gt;
                                  &amp;nbsp;
                                  Adicionar
                              &lt;/button&gt;
                              &lt;button type="submit" className={this.state.isEdit ? "btn btn-primary margin-right" : "btn btn-primary margin-right hidden"}&gt;
                                  &lt;span className="glyphicon glyphicon-floppy-disk" aria-hidden="true"&gt;&lt;/span&gt;
                                  &amp;nbsp;
                                  Salvar
                              &lt;/button&gt;
                              &lt;button type="button" className="btn btn-default margin-right" onClick={this.handleReset}&gt;
                                  &lt;span className="glyphicon glyphicon-erase" aria-hidden="true"&gt;&lt;/span&gt;
                                  &amp;nbsp;
                                  Limpar
                              &lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              );
          }
      }
  
      export default NewUser;
  
  my component User item:
  ***src/components/User.js***
  
  import React from 'react';
  
  export default ({ user: { name, cpfcnpj, _id }, onDelete, onEditUser }) =&gt; {
      return (
          &lt;tr&gt;
              &lt;th scope="row"&gt;{name}&lt;/th&gt;
              &lt;td&gt;{cpfcnpj}&lt;/td&gt;
              &lt;td&gt;
                  &lt;button className="btn btn-warning btn-xs margin-right" type="button" onClick={() =&gt; onEditUser(_id)}&gt;
                      &lt;span className="glyphicon glyphicon-edit" aria-hidden="true"&gt; &lt;/span&gt;
                      &amp;nbsp;
                      Editar
                  &lt;/button&gt;
                  &lt;button className="btn btn-danger btn-xs margin-right" type="button" onClick={() =&gt; onDelete(_id)}&gt;
                      &lt;span className="glyphicon glyphicon-trash" aria-hidden="true"&gt; &lt;/span&gt;
                      &amp;nbsp;
                      Excluir
                  &lt;/button&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      );
  };
  </code></pre>
  
  <p>now my smart components:</p>
  
  <p><strong><em>src/containers/UserList.js</em></strong></p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import User from '../components/User';
  import { deleteUser, updateCurrentUser } from '../actions/user';
  import NewUser from '../components/NewUser';
  
  function UserList({ users, onDelete, onEditUser }) {
      if (!users.length) {
          return (
              &lt;div className="margin-top"&gt;
                  No Users
              &lt;/div&gt;
          )
      }
      return (
          &lt;div className="margin-top"&gt;
              &lt;table className="table table-striped"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th scope="col"&gt;Nome&lt;/th&gt;
                          &lt;th scope="col"&gt;CPF/CNPJ&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      {users.map(user =&gt; {
                          return (
                              &lt;User user={user} onDelete={onDelete} onEditUser={onEditUser} key={user._id} /&gt;
                          );
                      })}
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      );
  }
  
  const mapStateToProps = state =&gt; {
      return {
          users: state.users
      };
  };
  
  const mapDispatchToProps = dispatch =&gt; {
      return {
          onDelete: id =&gt; {
              dispatch(deleteUser(id));
          },
          onEditUser: (id) =&gt; {
              dispatch(updateCurrentUser(id))
          }
      };
  };
  
  export default connect(
      mapStateToProps,
      mapDispatchToProps
  )(UserList, NewUser);
  </code></pre>
  
  <p><strong><em>src/containers/CreateUser.js</em></strong></p>
  
  <pre><code>import { connect } from 'react-redux';
  import { createUser, updateUser } from '../actions/user';
  import NewUser from '../components/NewUser';
  
  const mapDispatchToProps = dispatch =&gt; {
      return {
          onAddUser: user =&gt; {
              dispatch(createUser(user));
          },
          onEdit: (id, name, cpfcnpj) =&gt; {
              dispatch(updateUser(id, name, cpfcnpj))
          }
      };
  };
  
  export default connect(
      null,
      mapDispatchToProps
  )(NewUser);
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/ZmBNC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZmBNC.png" alt="enter image description here"></a></p>
  
  <p><strong><em>src/App.js</em></strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import CreateUser from './containers/CreateUser';
  import UserList from './containers/UserList';
  import './css/main.css'
  
  class App extends Component {
    render() {
      return (
        &lt;div className="container"&gt;
          &lt;h1 className="styles-app"&gt;Usuários&lt;/h1&gt;
          &lt;div className="row styles-app"&gt;
            &lt;div className="col-md-12"&gt;
              &lt;CreateUser /&gt;
            &lt;/div&gt;
            &lt;div className="col-md-12"&gt;
              &lt;UserList /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>