Edit table values using react redux

Question

I'm learning React-Redux and I'm stuck in a part of learning, I'm trying to edit the user value from table using the form that already exists, thereby taking the value of the line, and passing to the form, and also saving the user id in a variable or something of the type to update the user, I do not know how to proceed with that part

my actions: src/actions/user.js

import { ADD_USER, DELETE_USER, UPDATE_USER, FETCH_USER } from '../constants/ActionTypes';
import axios from 'axios';

const apiUrl = 'http://localhost:8080/api/v1';

export const createUser = ({ name, cpfcnpj }) => {
    return (dispatch) => {
        return axios.post(`${apiUrl}/users/`, { name, cpfcnpj })
            .then(response => {
                dispatch(createUserSuccess(response.data.data))
            })
            .catch(error => {
                throw (error);
            });
    };
};

export const createUserSuccess = (data) => {
    return {
        type: ADD_USER,
        payload: {
            _id: data._id,
            name: data.name,
            cpfcnpj: data.cpfcnpj
        }
    }
};

export const deleteUserSuccess = id => {
    return {
        type: DELETE_USER,
        payload: {
            id
        }
    }
}

export const deleteUser = (id) => {
    console.log(id)
    return (dispatch) => {
        return axios.delete(`${apiUrl}/users/${id}`)
            .then(response => {
                dispatch(deleteUserSuccess(id))
            })
            .catch(error => {
                throw (error);
            });
    };
};

export const updateUserSuccess = (data) => {
    return {
        type: UPDATE_USER,
        payload: {
            _id: data._id,
            name: data.name,
            cpfcnpj: data.cpfcnpj
        }
    }
}

export const updateUser = (id, name, cpfcnpj) => {
    console.log(id, name, cpfcnpj)
    return (dispatch) => {
        return axios.put(`${apiUrl}/users/${id}`, { name, cpfcnpj })
            .then(response => {
                dispatch(updateUserSuccess(response.data.data))
            })
            .catch(error => {
                throw (error);
            });
    };
};

export const fetchUsers = (users) => {
    return {
        type: FETCH_USER,
        users
    }
};

export const fetchAllUsers = () => {
    return (dispatch) => {
        return axios.get(`${apiUrl}/users/`)
            .then(response => {
                dispatch(fetchUsers(response.data.data))
            })
            .catch(error => {
                throw (error);
            });
    };
};

my Smart Component CreateUser: 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));
        }
    };
};

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

my Dummy Component NewUser: src/components/NewUser.js

import React, { Component } from 'react';

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

    handleInputChange = e => {
        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.props.onEdit(this.state);
                this.handleReset();
            }
        }

    };

    handleReset = () => {
        this.setState({
            name: '',
            cpfcnpj: ''
        });
    };

    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;

src/containers/UserList.js

import React from 'react';
import { connect } from 'react-redux';
import User from '../components/User';
import { deleteUser, updateUser } from '../actions/user';

function UserList({ users, onDelete, onEdit }) {
    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} key={user._id} onEdit={onEdit} />
                        );
                    })}
                </tbody>
            </table>
        </div>
    );
}

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

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

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

src/reducers/userReducer.js

import { ADD_USER, DELETE_USER, UPDATE_USER, FETCH_USER } from '../constants/ActionTypes';

export default function userReducer(state = [], action) {
    switch (action.type) {
        case ADD_USER:
            return [...state, action.payload];
        case DELETE_USER:
            return state.filter(user => user._id !== action.payload.id);
        case UPDATE_USER:
            return [...state, action.payload];
        case FETCH_USER:
            return action.users;
        default:
            return state;
    }
}

Solution I thought but could not reproduce

I need to get the value of the id of the value table item that comes as key in the UserList, pass to the onClick parameter of the user component button, and pass the value of the id when I click edit in some table item to the Form in NewUser, in order to be able to edit the table item using onEdit in NewUser.

---

Stucked in solution ma_dev_15

I created a const initialState, with current user, but my userReducer State just looks the users,

src/recuders/userReducer.js import { ADD_USER, DELETE_USER, UPDATE_USER, UPDATE_CURRENT_USER, FETCH_USER } from '../constants/ActionTypes';

const initialState = {
    users: [],
    currentUser: {},
}

export default function userReducer(state = initialState, action) {
    switch (action.type) {
        case ADD_USER:
            return [...state, action.payload];
        case DELETE_USER:
            return state.filter(user => user._id !== action.payload.id);
        case UPDATE_USER:
            return updateObject(state, action)
        case UPDATE_CURRENT_USER:
            return [...state, action.currentUser];
        case FETCH_USER:
            return action.users;
        default: 
            return state;
    }
}

function updateObject(array, action) {

    return array.map((item, index) => {
        if (item._id !== action.payload._id) {
            return item
        }

        return {
            ...item,
            ...action.payload
        }
    })
}

export reducers src/reducers/index.js

import { combineReducers } from 'redux';
import users from './userReducer';
import currentUser from './userReducer';

export default combineReducers({
    users: users,
    currentUser: currentUser
});

user actions: src/actions/user.js

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

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

I make my UserList connected to CreateUser

src/components/containers/UserList

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

And when I click in Edit, and try to see console.log(Store.getState) in NewUser.js just returns me all users, I don't have currentUser.

Answer 1

You can create userReducer state like this:

const initialState = {
  users: [],
  currentUser :{},
}

export default function userReducer(state = initialState, action) {
    switch (action.type) {
        case ADD_USER:
            return [...state, action.payload];
        case DELETE_USER:
            return state.filter(user => user._id !== action.payload.id);
        case UPDATE_USER:
            return [...state, action.payload];
        case FETCH_USER:
            return action.users;
        default:
            return state;
    }
}

After that let me tell you few simple steps:

1. On clicking edit button pass userId and corres to that action update the currentUser in userReducer.
2. Make the NewUser component connected component and get the currentUser from store and set to the input fields.
3. On successfull edit update the currentUser as empty and update users list

I hope you got what I mean. Let me know if you stuck somewhere.