Update component when the store changes

Question

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.

My source code:

I have an action which updates currentUser. currentUser is the user I want to update

src/actions/user.js

export const updateCurrentUserSuccess = (currentUser) => {
    return {
        type: UPDATE_CURRENT_USER,
        currentUser
    }
}

export const updateCurrentUser = (id) => {
    return (dispatch) => {
        return axios.get(`${apiUrl}/users/${id}`)
            .then(response => {
                console.log(response.data.data)
                dispatch(updateCurrentUserSuccess(response.data.data))
            })
            .catch(error => {
                throw (error);
            });
    };
};

my currentUserReducer: src/reducers/currentUserReducer.js

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;
    }
}

now my components:

my NewUser form: src/components/NewUser.js

    import React, { Component } from 'react';
    import { Store } from '../store'

    class NewUser extends Component {
        state = {
            id: '',
            name: '',
            cpfcnpj: '',
            isEdit: false
        };

        componentDidMount(){
            this.handleUserChange()
        }

        handleInputChange = e => {
            this.handleUserChange();
            this.setState({
                [e.target.name]: e.target.value
            });
        };

        handleSubmit = e => {
            e.preventDefault();
            if (!this.state.isEdit) {
                if (this.state.name.trim() && this.state.cpfcnpj.trim()) {
                    this.props.onAddUser(this.state);
                    this.handleReset();
                }
            } else {
                if (this.state.name.trim() && this.state.cpfcnpj.trim() && this.state.id !== '') {
                    this.props.onEdit(this.state);
                    this.handleReset();
                }
            }

        };

        handleReset = () => {
            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 (
                <div>
                    <form className="form-inline" onSubmit={this.handleSubmit}>
                        <div className="form-group margin-right">
                            <input
                                type="text"
                                placeholder="Name"
                                className="form-control"
                                name="name"
                                onChange={this.handleInputChange}
                                value={this.state.name}
                            />
                        </div>
                        <div className="form-group margin-right">
                            <input
                                type="text"
                                placeholder="CPF/CNPJ"
                                className="form-control"
                                name="cpfcnpj"
                                onChange={this.handleInputChange}
                                value={this.state.cpfcnpj}>
                            </input>
                        </div>
                        <div className="form-group">
                            <button type="submit" className={this.state.isEdit ? "btn btn-success margin-right hidden" : "btn btn-success margin-right"}>
                                <span className="glyphicon glyphicon-plus" aria-hidden="true"></span>
                                &nbsp;
                                Adicionar
                            </button>
                            <button type="submit" className={this.state.isEdit ? "btn btn-primary margin-right" : "btn btn-primary margin-right hidden"}>
                                <span className="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
                                &nbsp;
                                Salvar
                            </button>
                            <button type="button" className="btn btn-default margin-right" onClick={this.handleReset}>
                                <span className="glyphicon glyphicon-erase" aria-hidden="true"></span>
                                &nbsp;
                                Limpar
                            </button>
                        </div>
                    </form>
                </div>
            );
        }
    }

    export default NewUser;

my component User item:
***src/components/User.js***

import React from 'react';

export default ({ user: { name, cpfcnpj, _id }, onDelete, onEditUser }) => {
    return (
        <tr>
            <th scope="row">{name}</th>
            <td>{cpfcnpj}</td>
            <td>
                <button className="btn btn-warning btn-xs margin-right" type="button" onClick={() => onEditUser(_id)}>
                    <span className="glyphicon glyphicon-edit" aria-hidden="true"> </span>
                    &nbsp;
                    Editar
                </button>
                <button className="btn btn-danger btn-xs margin-right" type="button" onClick={() => onDelete(_id)}>
                    <span className="glyphicon glyphicon-trash" aria-hidden="true"> </span>
                    &nbsp;
                    Excluir
                </button>
            </td>
        </tr>
    );
};

now my smart components:

src/containers/UserList.js

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 (
            <div className="margin-top">
                No Users
            </div>
        )
    }
    return (
        <div className="margin-top">
            <table className="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">Nome</th>
                        <th scope="col">CPF/CNPJ</th>
                    </tr>
                </thead>
                <tbody>
                    {users.map(user => {
                        return (
                            <User user={user} onDelete={onDelete} onEditUser={onEditUser} key={user._id} />
                        );
                    })}
                </tbody>
            </table>
        </div>
    );
}

const mapStateToProps = state => {
    return {
        users: state.users
    };
};

const mapDispatchToProps = dispatch => {
    return {
        onDelete: id => {
            dispatch(deleteUser(id));
        },
        onEditUser: (id) => {
            dispatch(updateCurrentUser(id))
        }
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(UserList, NewUser);

src/containers/CreateUser.js

import { connect } from 'react-redux';
import { createUser, updateUser } from '../actions/user';
import NewUser from '../components/NewUser';

const mapDispatchToProps = dispatch => {
    return {
        onAddUser: user => {
            dispatch(createUser(user));
        },
        onEdit: (id, name, cpfcnpj) => {
            dispatch(updateUser(id, name, cpfcnpj))
        }
    };
};

export default connect(
    null,
    mapDispatchToProps
)(NewUser);

src/App.js

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 (
      <div className="container">
        <h1 className="styles-app">Usuários</h1>
        <div className="row styles-app">
          <div className="col-md-12">
            <CreateUser />
          </div>
          <div className="col-md-12">
            <UserList />
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Answer 1

Here is something you might try. Connect your NewUser.js to the store.

import { connect } from 'react-redux;
export default connect(mapStateToProps)(NewUser);

Then map your currentUser state to props.

const mapStateToProps = state => {
return {
    currentUser: state.currentUser
  };
};

In your currentUserReducer

initialState = {
  //Assuming these are the only values in response
  id: '',
  name: '',
  cpfcnpj: '',
  isEdit: false
};

export default function userReducer(state = initialState, action) {
switch (action.type) {
    case UPDATE_CURRENT_USER:
        return {
          ...state,
          id: action.currentUser.id,
          name: action.currentUser.name,
          cpfcnpj: action.currentUser.cpfcnpj,
          isEdit: true
        };
    default: 
        return state;
  }
}

You should have access to the current user object now in props.

Then in your input value field

value={this.props.currentUser.name}
value={this.props.currentUser.cpfcnpj}

You may also need to do a check to see if these values have been updated. Also, not sure if the placeholder text might interfere.

Hope this gets you closer to the solution.

Edit

In the case of clearing props, you might just add another action to do so. In your actions for currentUser:

export const clearUserData = () => {
return {
    type: CLEAR_USER_DATA,
  }
}

And in your reducer:

export default function userReducer(state = initialState, action) {
switch (action.type) {
case UPDATE_CURRENT_USER:
    return {
      ...state,
      id: action.currentUser.id,
      name: action.currentUser.name,
      cpfcnpj: action.currentUser.cpfcnpj,
      isEdit: true
    };
case CLEAR_USER_DATA:
  return {
      ...state,
      id: '',
      name: '',
      cpfcnpj: '',
      isEdit: false
    };
default: 
    return state;
 }
}

Add the clearUserData action to execute after you submit your edits and it should reset your reducer. You might even be able to just do

return {
  ...state,
  initialState
};