a quick question on this flow

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)

Answer 1

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

Answer 2

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.

Answer 3

User1034446946 posted

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

Answer 4

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

Answer 5

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.