1
\$\begingroup\$

I've created a private function called _successResponse to handle successful responses from my promise.

The challenge was passing the dispatch function to the _successResponse which is being passed to the .then method as a callback.

I accomplished this by currying using .bind. I would love to get feedback on this approach.

import axios from 'axios';
import { browserHistory } from 'react-router';
import { 
        AUTH_USER,
        AUTH_ERROR,
        UNAUTH_USER,
        FETCH_MESSAGE
    } from './types';

const ROOT_URL = 'http://localhost:3090';

export function signinUser({ email, password }){
    return function(dispatch){
        // Submit email/password to server
        axios.post(`${ROOT_URL}/signin`, { email, password })
            .then(_successResponse.bind(null, dispatch))
            .catch(() => {dispatch(authError('Bad Login Info'))})
    }
}

export function signupUser({email, password}){
    return function(dispatch){
        axios.post(`${ROOT_URL}/signup`, { email, password })
            .then(_successResponse.bind(null, dispatch))
            .catch(response => {dispatch(authError(response.response.data.error))});
    }
}

export function authError(error){
    return {
        type: AUTH_ERROR,
        payload: error
    }
}

export function signoutUser(){
    localStorage.removeItem('token');

    return { type: UNAUTH_USER }
}

export function fetchMessage(){
    return function(dispatch){
        axios.get(ROOT_URL, {
            headers: { authorization: localStorage.getItem('token') }
        })
            .then(response => {
                dispatch({
                    type: FETCH_MESSAGE,
                    payload: response.data.message
                })
            });
    }
}

// Private functions
function _successResponse(dispatch, response){
        // If request is valid...
        // - Update state to indicate user is authenticated
        dispatch({ type: AUTH_USER });
        // - Save the JWT token
        localStorage.setItem('token', response.data.token);
        // - redirect to the route '/feature'
        browserHistory.push('/feature');
}
\$\endgroup\$
1
\$\begingroup\$

Currying?

1

Photo hosted via unsplash, taken by Monika Grabkowska

Yes you used Function.bind() to fix the callback function as the first argument to the private function, and this is a good approach to avoid excess functions and reduce the number of lines. While the concept is similar, what this code uses is actually Partial Application. Read more about the differences in this article.


The first couple functions appear to catch errors, but fetchMessage() doesn't appear to. Maybe you have updated it since you posted it but if not, I would suggest adding error handling there too.


You could consider using async and await to reduce the .then() callbacks.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.