Cfrtjryk

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');

}

Currying?

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.