How does react Asynchronous action handle callbacks?

in developing react projects, a store usually includes actionCreator, constant, index and reducer4 JS files.

for example, I have an index component
when I log in, I dispatch an action,. Of course, this action must be asynchronous, and I need to use redux-thunk as a middleware to do business processing in actionCreator, which is no problem. But after I finish processing in actionCreator, I send a reducer to notify store to change the data. When the store data changes, the component will be notified to update the data. This is the redux principle, and action is asynchronous. The method in the component is Synchronize

the effect I want is that when the login is successful, it will prompt a pop-up box to show that the login is successful! But action is asynchronous, and the login method in the index component has already been executed. What should I do with this effect?

Oct.25,2021

// index.js
// index
import actions from './action.js';
class Index extends PureComponent {
    state = {
        showToast: false,
    };

    async componentDidMount() {
        // componentDidMount
        // loginaction
        // isSuccessasyncboolean
        const isSuccess = await this.props.actions.login('helloworld', '123456');
        if (isSuccess) {
            // toastalert
            // Toast.show(),Modal.alert(),
            // showToasttoast
            this.setSate({
                showToast: true,
            });
        }
    }
    
    render() {
        const { 
            userInfo,
            showToast, 
        } = this.props;
        return (
            <div>
                {userInfo && <div>{userInfo.name}</div>}
                {showToast && <Toast message="" />}
            </div>
        )
    }
}

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

const mapDispathToProps = (dispatch) => {
    return {
        actions: bindActionCreators(actions, disptach),
    };
};

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

Asynchronous action will return a promise, directly in the method that calls asynchronous action, after await this promise,promise resolve, it will continue to perform subsequent operations such as playing toast.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b30326-2bd0f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b30326-2bd0f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?