locked
a quick question on this flow RRS feed

  • Question

  • User1034446946 posted

    i am doing following through the information on

    https://jasonwatmore.com/post/2018/08/14/aspnet-core-21-jwt-authentication-tutorial-with-example-api

    and i am strugglying to understand

    handleSubmit(e) {
            e.preventDefault();
    
            this.setState({ submitted: true });
            const { username, password } = this.state;
            const { dispatch } = this.props;
            if (username && password) {
                dispatch(userActions.login(username, password));
            }
        }

    then runs the funtions userActions.login

    export const userActions = {
        login,
        logout,
        getAll
    };
    
    function login(username, password) {
        return dispatch => {
            dispatch(request({ username }));
    
            userService.login(username, password)
                .then(
                    user => { 
                        dispatch(success(user));
                        history.push('/');
                    },
                    error => {
                        dispatch(failure(error));
                        dispatch(alertActions.error(error));
                    }
                );
        };
    
        function request(user) { return { type: userConstants.LOGIN_REQUEST, user } }
        function success(user) { return { type: userConstants.LOGIN_SUCCESS, user } }
        function failure(error) { return { type: userConstants.LOGIN_FAILURE, error } }
    }

    the bit i am confused about is this from the login function

    return dispatch => {
            dispatch(request({ username }));

    where does dispatch come from (how and where is it passed in), i know what it does and i understand the rest of the function, i just don't know where dispatch comes from, there are a couple more examples, i have a similar issue with, but justed this one for a reference point.

    i thought it was a curried function but i thought it would have to be applied as userActions.login(username, password)(dispatch)

    Tuesday, September 24, 2019 10:59 PM

Answers

  • User1034446946 posted

    found it, its pass in as props from the root component

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 26, 2019 12:27 AM

All replies

  • User283571144 posted

    Hi EnenDaveyBoy,

    As far as I knwo, the dispatch is a function of the Redux store. You call store.dispatch to dispatch an action. This is the only way to trigger a state change.   So in my opinion, it just dispatch an action to call request function. 

    Best Regards,

    Brando

    Wednesday, September 25, 2019 9:52 AM
  • User1034446946 posted

    Hi EnenDaveyBoy,

    As far as I knwo, the dispatch is a function of the Redux store. You call store.dispatch to dispatch an action. This is the only way to trigger a state change.   So in my opinion, it just dispatch an action to call request function. 

    Best Regards,

    Brando

    thats for the reply, as i said i know where it comes from in terms of the import and what it does in terms of changing state, what i don't know is where the function gets the it from.

    Wednesday, September 25, 2019 11:09 AM
  • User1034446946 posted

    found it, its pass in as props from the root component

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, September 26, 2019 12:27 AM
  • User-474980206 posted

    instead of using props  (and passing thru children), you can use react context api to pass the redux dispatcher. 

    https://blog.bitsrc.io/build-our-own-react-redux-using-usereducer-and-usecontext-hooks-a5574b526475

    Thursday, September 26, 2019 7:42 PM
  • User1034446946 posted

    thanks for the info, i have had a lot of errors using hooks and building functions in there own files and importing them (similar to how you do in c#), i have just restructure my project over the last few days and have a few more bits to sort before i can full steam ahead.

    One of my issues has been using useDispatch hooks in say a userService, so when i saw this in the tutorial i was both curious as it was an issue i had had, plus i thought it might have been a ES6 short cut.

    Friday, September 27, 2019 9:00 PM