mercredi 8 mars 2017

Test async middleware in redux with thunk

I have a middleware that waits for a ARTICLE_REQUEST action, performs a fetch and dispatches either an ARTICLE_SUCCESS or an ARTICLE_FAILURE action when fetch is done. Like so

import { articleApiUrl, articleApiKey } from '../../environment.json';
import { ARTICLE_REQUEST, ARTICLE_SUCCESS, ARTICLE_FAILURE } from '../actions/article';

export default store => next => action => {

    // Prepare variables for fetch()
    const articleApiListUrl = `${articleApiUrl}list`;
    const headers = new Headers({ 'Content-Type': 'application/json', 'x-api-key': articleApiKey });
    const body = JSON.stringify({ ids: [action.articleId] });
    const method = 'POST';

    // Quit when action is not to be handled by this middleware
    if (action.type !== ARTICLE_REQUEST) {
        return next(action)
    }

    // Pass on current action
    next(action);

    // Call fetch, dispatch followup actions and return Promise
    return fetch(articleApiListUrl, { headers, method, body })
        .then(response => response.json());   
        .then(response => {
            if (response.error) {
                next({ type: ARTICLE_FAILURE, error: response.error });
            } else {
                next({ type: ARTICLE_SUCCESS, article: response.articles[0] });
            }
        });

}

I really wonder how to test this async code. I want to see if the follow-up actions will be dispatched properly and maybe if the fetch call gets invoked with the proper URL and params. Can anyone help me out?

PS: I am using thunk although I am not absolutely sure of its function as I just followed another code example

Aucun commentaire:

Enregistrer un commentaire