Redux-form обработка ответа post запроса

Question

Есть следующая ситуация - есть форма redux-form. При отправке данных Post запросом, с бэкэнда прилетает ответный JSON.

Вопрос следующий - могу ли я отобразить на этой же странице данные, содержащиеся в этом ответном JSON ? Возможно в какой-нибудь вложенный компонент.

С React/Redux я сталкиваюсь второй раз, и пока не имею полного понимания.

Заранее благодарен за помощь.

Примерный код ниже:

ReportsPage.js

    class ReportsPage extends React.Component {

    onSubmit = formValues => {
        this.props.createReportAction(formValues);
    };

    render() {
        return (
            <div>
                <div className="container-fluid">
                    <ReportsForm onRenderPropSubmit = {formValues => {this.onSubmit(formValues);}} />
                </div>
            </div>
        )}
    }


    const mapStateToProps = (state) => {
         return {asset: state.asset};
    };

    export default connect(mapStateToProps, {createReportAction})(ReportsPage);

ReportsForm.js

class ReportsForm extends React.Component {

    componentDidMount() {
        this.props.getEmployeesAction();
    }

    onSubmit = formValues => {
        formValues.employee = this.props.employees.find(e=> e.id === formValues.employee);
        this.props.onRenderPropSubmit(formValues);
    };

    render() {

        const {
            itemTypeValue,
            pristine,
            reset,
            submitting,
        } = this.props;


        return (
            <form onSubmit={this.props.handleSubmit(this.onSubmit)}>

                <div className="form-group">
                    <Field component={"select"} className="form-control" name="itemType" aria-describedby="itemTypeHelp">
                        <option />
                        <option value={"ItemType1"}>type1</option>
                        <option value={"ItemType2"}>type2</option>
                        <option value={"ItemType3"}>type3</option>
                    </Field>
                    <small className="form-text text-muted" id="itemTypeHelp">Тип</small>
                </div>

                <div className="form-group">
                    <Field component={"select"} className="form-control" name="employee" aria-describedby="employeeHelp">
                        <option />
                        {this.props.employees.map(employee => {
                            if (employee) {
                                return (
                                    <option key={employee.id} value={employee.id}>{employee.fullName}</option>
                                );}
                            else return null;
                            })
                        }
                    </Field>
                    <small className="form-text text-muted" id="employeeHelp">Сотрудник</small>
                </div>

                <div className="form-group">
                    <Field component={"input"} className="form-control" type="text" name={"desc"}aria-describedby="field1Help" />
                    <small className="form-text text-muted" id="field1Help">Поле 1</small>
                </div>

                <div className="float-left my-sm-5">
                    <button className="btn btn-primary" type="submit" disabled={pristine || submitting}>Отправить запрос</button>
                    <button className="btn btn-info" type="button" disabled={pristine || submitting} onClick={reset}>Очистка формы</button>
                </div>
            </form>
        );
            }
        }

const mapStateToProps = ({ employees}) => {
    return {employees: Object.values(employees)};
};


const selector = formValueSelector('reportsForm'); 
ReportsForm = connect(state => {
    const itemTypeValue = selector(state, 'itemType');
    return { itemTypeValue};
        })(ReportsForm);


export default connect(mapStateToProps, {getEmployeesAction})(reduxForm({form: 'reportsForm'})(ReportsForm));

ReportActions.js

import backendApi from "../backendApis/backendReportsApi";

export const CREATE_REPORT = 'CREATE_REPORT';


export const createReportAction = (formValues) => async (dispatch) => {
    const response = await backendApi.post('/reports/request', { ...formValues });
    dispatch({
        type: CREATE_REPORT,
        payload: response.data
    });
};

ReportReducer.js

const INITIAL_STATE = [];

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case CREATE_REPORT:
            return {...state, [action.payload.id]: action.payload };
        
        default:
            return state;
    }

БЛОГ НА HUSL

Redux-form обработка ответа post запроса

Ответы (0 шт):