Нужно ли дважды вызывать действие Redux перед обновлением состояния?

Question

Я вызываю избыточное действие, которое делает запрос get в базу данных и возвращает объект с правильными данными в нем.Я проследил за объектом через систему, показав, что он правильно отправляется на весь реактивный компонент, однако, когда вызывается избыточное действие, объект не обновляется.Если сделан второй вызов, то состояние обновляется.Я предполагаю, что это как-то связано с асинхронным поведением, но я не уверен, как это исправить.

Вот соответствующие части компонента, вызывающего действие:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { MDBContainer, MDBInput, MDBBtn } from 'mdbreact';
import { getSinglePatient } from '../../../actions/patientActions';
import PatientConfirmModal from '../../modals/PatientConfirmModal';

export class SelectPatient extends Component {
    state = {
        patientConfirmModalToggle: false,
        patient: {},
        searchID: ''
    };

    static propTypes = {
        patient: PropTypes.object.isRequired,
        getSinglePatient: PropTypes.func.isRequired
    };

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

    toggleConfirmModal = () => {
        this.setState({
            patientConfirmModalToggle: !this.state.patientConfirmModalToggle
        });
    };


    searchForPatient = () => {
        this.props.getSinglePatient(this.state.searchID);
        console.log(this.props.patient);
        const newPatient = this.props.patient.patients[0];

        console.log(newPatient);
        if (newPatient !== undefined) {
            this.setState({
                patient: newPatient
            });
            this.toggleConfirmModal();
        }
        console.log(this.state.patient);
    };

    render() {
        return (
            <MDBContainer>
                <h3>Please enter a Patient ID to begin an assessment</h3>
                <MDBInput
                    label="Patient ID"
                    group
                    type="text"
                    name="searchID"
                    id="searchID"
                    onChange={this.onChange}
                />
                <MDBBtn
                    onClick={() => this.searchForPatient()}
                >
                    Search
                </MDBBtn>
                <PatientConfirmModal
                    modal={this.state.patientConfirmModalToggle}
                    patient={this.state.patient}
                    toggle={this.toggleConfirmModal}
                />
            </MDBContainer>
        );
    }
}

export default connect(
    {},
    { getSinglePatient }
)(SelectPatient);

Вот действиесам:

export const getSinglePatient = id => (dispatch, getState) => {
    dispatch(setPatientsLoading());
    axios
        .get(`/api/patients/${id}`, tokenConfig(getState))
        .then(res =>
            dispatch({
                type: GET_SINGLE_PATIENT,
                payload: res.data[0]
            })
        )
        .catch(err =>
            dispatch(returnErrors(err.response.data, err.response.status))
        );
};

И вот маршрут, на который он отправляется:

// @route   GET api/patients
// @desc    Get a single patient
// @access  Public
router.get('/:id', (req, res) => {
    console.log('GET single request hit (ID:' + req.params.id + ')');
    Patient.find({ patientID: req.params.id }).then(patient => {
        res.json(patient);
    });
});

Вот результаты журнала консоли (первый результат при нажатии кнопки поиска один раз, второй приповторное нажатие и повторный вызов действия):

Результаты

Answer 1

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    //make sure you are dispatching your action like below
   // this.props.dispatch(your_action())
     
     searchForPatient = () => {
        this.props.dispatch(getSinglePatient(this.state.searchID)); //make change
        console.log(this.props.patient);
        const newPatient = this.props.patient.patients[0];

        console.log(newPatient);
        if (newPatient !== undefined) {
            this.setState({
                patient: newPatient
            });
            this.toggleConfirmModal();
        }
        console.log(this.state.patient);
    }
   
     
    //use mapStateToProps function  to access your resultent data comes from server : you can get your result in this.props
   //put this funcion above export default co.... 
   function mapStateToProps(state){
        console.log(state)
        return{
            patient : state.patient
        }
    }


    export default  connect(mapStateToProps , {getSinglePatient} )(SelectPatient)