Как задать последовательные запросы через axios в react+redux?

Question

[Андрей Сергеев]

Результат: надо чтобы сохранялись данные на странице настроек.
Использую react+redux. Для форм использую redux-form. Для запросов использую axios.

Нужна такая последовательность действий:
1. Отправляем данные POST-запросом на сервер по нажатию кнопки "Сохранить".
2. Сразу после успешной отправки получаем обновленные данные GET-запросом с сервера и подставляем их в поля.

Проблема в том, что он сохраняет данные в базе сервера, но получает данные уже не актуальные. Все решается тем, что нужно обновить страницу, и только тогда он получает актуальные данные с базы. Но это плохое решение.

КОД в комментариях

Comments

[Андрей Сергеев]

Страница настроек с полями

import React, {Component, createRef} from 'react';
import Input from '../components/UI/Input';
import Tabs from '../components/UI/Tabs';
import Checkbox from '../components/UI/Checkbox';
import {connect} from 'react-redux';
import {getPersonSettings, toggleSelect, changeDefaultValue, changeValueStore, savePersonalInformation} from '../redux/actions/settings/settings.actions';
import Spinner from '../components/UI/Spinner';

import {Field, reduxForm, change, getFormValues} from 'redux-form'
import FormComponent from '../components/UI/Forms';
import RenderTabs from '../components/UI/Tabs-new';
import {compose} from 'redux';
import PersonInformationForm from '../components/UI/formControls/settings/personInformation.form';

class Settings extends Component {

            componentDidMount() {
            this.props.getPersonSettings()
        }

    sumbitPersonInformationForm(values) {
        const {settingsCountry, prefix} = this.props.selects
        const {settingsName, settingsSurname, settingsBirthday, settingsPassport, settingsCity, settingsAddress_1, zip, phone} = values

        const phoneFull = String(prefix ? prefix.id : this.props.state.fields.personInformationForm.prefix.value) + phone

        this.props.savePersonalInformation({
            settingsName,
            settingsSurname,
            settingsBirthday,
            settingsPassport,
            settingsCountry: settingsCountry ? settingsCountry.id : this.props.state.fields.personInformationForm.settingsCountry.value,
                settingsCity,
                settingsAddress_1,
                zip,
                prefix: prefix ? prefix.id : this.props.state.fields.personInformationForm.prefix.value,
                phone: this.props.state.fields.personInformationForm.phone.value ? phone : phoneFull
        })
        this.props.getPersonSettings()
    }

    render() {
        return (
            <main className="depositing">
            <h1 className="container">Мой аккаунт</h1>
            {
                this.props.data.loading !== undefined
                    ? this.props.data.loading
                        ? <Spinner />
                        : <section className="tabs js-tabs">
                            <RenderTabs page={'settings'} id='settingsTabs'>
                                <PersonInformationForm onSubmit={this.sumbitPersonInformationForm.bind(this)} fields={this.props.state.fields} />
                                <div>Test</div>
                            </RenderTabs>
                        </section>
                    : null
            }
        </main>
        )
    }
}

const MSTP = state => {
    return {
            MSTPState: state,
        data: state.settings,

        state: state.settings,
        selects: state.forms.selects
    }
}

const MDTP = dispatch => {
    return {
            getPersonSettings: () => dispatch(getPersonSettings()),
        //changeValueStore: values => dispatch(changeValueStore(values)),
        savePersonalInformation: personInformation => dispatch(savePersonalInformation(personInformation))
    }
}

export default connect(MSTP, MDTP)(Settings)

Компонент формы

import React, {useEffect} from 'react'
import {Field, reduxForm, change, getFormValues} from 'redux-form'
import {compose} from 'redux'
import {connect} from 'react-redux'
import RenderInput from '../../formComponents/RenderInput'
import RenderSelect from '../../formComponents/RenderSelect'
import RenderPhone from '../../formComponents/RenderPhone'

const PersonInformationForm = props => {

    const fieldID = props.fields[props.form]

    useEffect(() => {
        for (let key in fieldID)
            props.change(fieldID[key].id, fieldID[key].value)
    }, [])

    return (
        <>
            <form id='personal_button' onSubmit={props.handleSubmit} className="settings__form columns_2">
                <div className="box card">
                    <h3 className="box__heading">Личные данные</h3>

                    <RenderInput data={fieldID['settingsName']} />
                    <RenderInput data={fieldID['settingsSurname']} />
                    <RenderInput data={fieldID['email']} />

                    <RenderPhone dataSelect={fieldID['prefix']} dataInput={fieldID['phone']} />

                    <RenderInput data={fieldID['settingsBirthday']} />
                    <RenderInput data={fieldID['settingsPassport']} />

                </div>
                <div className="box card">
                    <h3 className="box__heading">Адрес проживания</h3>

                    <RenderSelect data={fieldID['settingsCountry']} />
                    <RenderInput data={fieldID['settingsCity']} />
                    <RenderInput data={fieldID['settingsAddress_1']} />
                    <RenderInput data={fieldID['zip']} />

                </div>
            </form>

            <div className="fixed">
                <div className="container">
                    <button id="btn_person_save" form="personal_button" className="button settings__button">Сохранить</button>
                </div>
            </div>
        </>
    )
}

export default reduxForm({form: 'personInformationForm' })(PersonInformationForm)

Axios

import axios from "axios";

export const requestPost = async (url, params = { }) => {
    return await axios.post(url, params)
}

export const requestGet = async (url) => {
    return await axios.get(url)
}

export const requestAll = async ([...url]) => {
    return await axios.all([
        axios.get(url[0]),
        axios.post(url[1])
    ])
}

[Андрей Сергеев]

Сейчас вот такой код:
action

import {
            SETTINGS_REQUEST,
            SETTINGS_SUCCESS,
            SETTINGS_FAILURE,
            SETTINGS_DROPDOWN_SELECT,
            SETTINGS_DEFAULT_VALUE_SELECT,
            SETTINGS_SAVE_SUCCESS,
            SETTINGS_CHANGE_VALUE_STORE
        } from "../../constants/settings/settings.constants"
import {LOGOUT} from "../../constants/auth.constants"
import {history} from "../../history"
import {requestPost, requestGet, requestPostGet} from "../../api/request"



export const getPersonSettings = () => {

    return dispatch => {
            requestGet('Settings/GetPersonSettings')
                .then(resp => {
                    resp.status === 200
                        ? dispatch({ type: SETTINGS_SUCCESS, payload: resp.data, loading: false })
                        : dispatch({ type: SETTINGS_FAILURE, error: resp.status })
                })
                .catch(error => {
                    if ([401, 403, 500].indexOf(error.response.status) !== -1) {
                        dispatch({ type: LOGOUT })
                        history.push('/')
                    }
                    dispatch({ type: SETTINGS_FAILURE, error })
                })
        dispatch({type: SETTINGS_REQUEST })
    }
}

export const savePersonalInformation = ({...params}) => {

    const {settingsName, settingsSurname, settingsBirthday, settingsPassport, settingsCountry, settingsCity, settingsAddress_1, zip, prefix, phone} = params

    let personalInformation = {
            FirstName: settingsName || null,
        LastName: settingsSurname || null,
        BirthDateStr: settingsBirthday || null,
        PersonalDocument: settingsPassport || null,
        DictionaryCountryId: Number(settingsCountry) || null,
        City: settingsCity || null,
        Address: settingsAddress_1 || null,
        Zip: zip || null,
        PhonePrefix: String(prefix) || null,
        Phone: phone || null
    }

    return dispatch => {
            requestPost('Settings/ChangePersonalInformation', personalInformation)
                .then(resp => {
                    dispatch({ type: SETTINGS_SAVE_SUCCESS, loading: true })
                })
                .catch(error => {
                    dispatch({ type: SETTINGS_FAILURE, error })
                })
        dispatch({type: SETTINGS_REQUEST })
    }
}

reducer

import {SETTINGS_REQUEST, SETTINGS_SUCCESS, SETTINGS_FAILURE, SETTINGS_SAVE_SUCCESS} from '../../constants/settings/settings.constants'

const initialState = {
            fields: {
            personInformationForm: {
            settingsName: {
            id: 'settingsName',
                name: 'settingsName',
                type: 'text',
                required: true,
                label: 'Имя',
                edit: false
            },
            settingsSurname: {
            id: 'settingsSurname',
                name: 'settingsSurname',
                type: 'text',
                required: true,
                label: 'Фамилия',
                description: 'Вы можете изменить имя и фамилию до тех пор, пока не прошли идентификацию личности Veriff',
                edit: false
            },
            email: {
            id: 'email',
                name: 'email',
                type: 'email',
                required: true,
                label: 'Электронная почта',
                description: 'Чтобы изменить адрес электронной почты обратитесь в службу поддержки',
                edit: false
            },
            prefix: {
            id: 'prefix',
                name: 'prefix',
                options: [
                    {id: 43, value: '+43 AT' },
                    ...
                    {id: 372, value: '+372 EE' }
                ],
                value: '+43 AT',
                labelHidden: true
            },
            phone: {
            id: 'phone',
                name: 'phone',
                type: 'phone',
                required: true,
                label: 'Контактный телефон',
                description: 'Чтобы изменить контактный телефон обратитесь в службу поддержки',
                edit: false
            },
            settingsBirthday: {
            id: 'settingsBirthday',
                name: 'settingsBirthday',
                type: 'text',
                required: true,
                label: 'Дата рождения',
                edit: true
            },
            settingsPassport: {
            id: 'settingsPassport',
                name: 'settingsPassport',
                type: 'text',
                required: true,
                label: 'Серия и номер документа',
                edit: true
            },
            settingsCountry: {
            id: 'settingsCountry',
                name: 'settingsCountry',
                options: [
                    {id: 208, value: 'Бельгия' },
                    ...
                    {id: 267, value: 'Эстония' }
                ],
                value: 208,
                label: 'Страна'
            },
            settingsCity: {
            id: 'settingsCity',
                name: 'settingsCity',
                type: 'text',
                required: false,
                label: 'Город',
                edit: true
            },
            settingsAddress_1: {
            id: 'settingsAddress_1',
                name: 'settingsAddress_1',
                type: 'text',
                required: false,
                label: 'Адрес 1',
                edit: true
            },
            zip: {
            id: 'zip',
                name: 'zip',
                type: 'text',
                required: false,
                label: 'ZIP',
                edit: true
            }
        }
    }
}

const settings = (state = initialState, action) => {
    switch (action.type) {
        case SETTINGS_REQUEST:
            return {...state, loading: true }
        case SETTINGS_SUCCESS:

            const {
            settingsName,
            settingsSurname,
            email,
            prefix,
            phone,
            settingsBirthday,
            settingsPassport,
            settingsCountry,
            settingsCity,
            settingsAddress_1,
            zip
        } = action.payload.personInformation

            return {
            ...state,
            fields: {
            ...state.fields,
            personInformationForm: {
            ...state.fields.personInformationForm,
            settingsName: {
            ...state.fields.personInformationForm.settingsName,
            value: settingsName
                        },
                        settingsSurname: {
            ...state.fields.personInformationForm.settingsSurname,
            value: settingsSurname
                        },
                        email: {
            ...state.fields.personInformationForm.email,
            value: email
                        },
                        prefix: {
            ...state.fields.personInformationForm.prefix,
            value: Number(prefix) || 43
                        },
                        phone: {
            ...state.fields.personInformationForm.phone,
            value: phone
                        },
                        settingsBirthday: {
            ...state.fields.personInformationForm.settingsBirthday,
            value: settingsBirthday
                        },
                        settingsPassport: {
            ...state.fields.personInformationForm.settingsPassport,
            value: settingsPassport
                        },
                        settingsCountry: {
            ...state.fields.personInformationForm.settingsCountry,
            value: Number(settingsCountry)
                        },
                        settingsCity: {
            ...state.fields.personInformationForm.settingsCity,
            value: settingsCity
                        },
                        settingsAddress_1: {
            ...state.fields.personInformationForm.settingsAddress_1,
            value: settingsAddress_1
                        },
                        zip: {
            ...state.fields.personInformationForm.zip,
            value: zip
                        }
                    }
                },
                loading: action.loading
            }
        case SETTINGS_FAILURE:
            return {...state, error: action.error, loading: false }
        case SETTINGS_SAVE_SUCCESS:
            return {...state, loading: action.loading }

        default:
            return state
    }
}

export default settings

Answer 1

[Роман Александрович]

вам нужно попросить вашего апи разработчика что бы он вернул в ответ на пост запрос новые данные. тогда вы избавитесь от второго запроса GET. или же вы можете написать ваши запросы с помощью промисов или с помощью async await. Если вы попробуете рещить проблему с помощью промисов или async await а проблема останется то пишите о проблеме вашему апи разработчику.

Comments

[Андрей Сергеев]

Дело в том, что при рендере страницы настроек в componentDidMount() идет GET-запрос на получение данных в поля формы. После нажатия кнопки сохранить, происходит POST-запрос в событии onSubmit для перезаписи данных в базе, потом идет ререндер страницы и опять запрашивает данные с сервера. Т.е. срабатывает функция в componentDidMount(). Но почему-то данные приходят не актуальные.

[Роман Александрович]

Андрей Сергеев, напишите 2 запроса прямо в консоле браузера через промисы и покажите результат апи разработчику.

Answer 2

[Сергей Сунцев]

Лучше Redux thunk используйте для запросов

Comments

[Андрей Сергеев]

Я ее использую. Ее ведь достаточно подключить через middleware?

[Сергей Сунцев]

Андрей Сергеев, да, и в них уже диспатчить ассинхронные методы

[Андрей Сергеев]

Сергей Сунцев, я так и сделал, проблема все равно осталась

[Сергей Сунцев]

Андрей Сергеев, Смотри тогда, скорее всего реакт не видит твои изменения. Попробуй получать данные, через reselect библиотеку.