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?

Javascript
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.

Previous: Some time ago, JDK11 said that it could not be downloaded, and there was a charge, but now it can be downloaded. What has changed?

Next: Python super () calls the parent class method, but the self in the parent class is not an instance of the parent class but an instance of the subclass?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu