Отредактируйте значения таблицы, используя ответную реакцию - PullRequest
Новая
       5

Отредактируйте значения таблицы, используя ответную реакцию

0 голосов
/ 03 января 2019

Я изучаю React-Redux, и я застрял в части обучения, я пытаюсь отредактировать пользовательское значение из таблицы, используя уже существующую форму, принимая значение строки и передавая форма, а также сохранение идентификатора пользователя в переменной или что-то типа для обновления пользователя, я не знаю, как продолжить эту часть

enter image description here

мои действия: 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);
            });
    };
};

Мой смарт-компонент 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);

Мой фиктивный компонент 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;

ЦСИ / контейнеры / 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);

ЦСИ / редукторы / 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;
    }
}

Решение, которое я подумал, но не смог воспроизвести

Мне нужно получить значение идентификатора элемента таблицы значений, который входит в качестве ключа в UserList, передать параметр onClick кнопки пользовательского компонента и передать значение идентификатора, когда я нажимаю кнопку edit в некоторой таблице. элемент формы в NewUser, чтобы иметь возможность редактировать элемент таблицы с помощью onEdit в NewUser.

Застрял в растворе ma_dev_15

Я создал const initialState с текущим пользователем, но мое состояние userReducer просто смотрит на пользователей,

ЦСИ / recuders / userReducer.js импортировать {ADD_USER, DELETE_USER, UPDATE_USER, UPDATE_CURRENT_USER, FETCH_USER} из '../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
        }
    })
}

экспортные редукторы ЦСИ / редукторы / index.js 

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

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

действия пользователя: 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

Я делаю свой UserList подключенным к CreateUser

* ** +1078 +1079 * SRC / компоненты / контейнеры / UserList * ** 1083 тысяча восемьдесят две * 
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);

И когда я нажимаю в Edit и пытаюсь увидеть console.log (Store.getState) в NewUser.js, просто возвращает мне всех пользователей, у меня нет currentUser.

1 Ответ

0 голосов
/ 03 января 2019

Вы можете создать состояние userReducer следующим образом: 

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

После этого позвольте мне рассказать вам несколько простых шагов:

  1. При нажатии кнопки редактирования введите userId и соответствует этому обновлению действия. currentUser в userReducer.
  2. Сделайте компонент NewUser подключенным к компоненту и получите currentUser из хранилища и задайте поля ввода.
  3. При успешном редактировании обновите currentUser как пустое и обновите users список

Надеюсь, вы поняли, о чем я. Дайте мне знать, если вы застряли где-нибудь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...