Redux Thunk/Eslint erro

Question

J'essaie de créer une application React + Redux, et j'utilise Redux Thunk.

Un de mes créateurs d'action se présente comme suit:

import api from '../api'; 

export const FETCH_BOOKS = 'FETCH_BOOKS'; 

export default() => dispatch => 
    api 
    .books() 
    .perPage(-1) 
    .then(books => 
     dispatch(books => ({ 
     type: FETCH_BOOKS, 
     books, 
     })) 
    ) 
    .catch(error => 
     dispatch(e => ({ 
     type: 'ERROR', 
     error: e, 
     })) 
    ); 

Mais quand je lance yarn run build:production je reçois l'erreur (s):

ERROR in ./scripts/ll-app/actions/fetch-books.js 

/Users/joneslloyd/resources/assets/scripts/ll-app/actions/fetch-books.js 
    9:11 warning 'books' is defined but never used          no-unused-vars 
    11:9 error Expected an assignment or function call and instead saw an expression no-unused-expressions 
    11:9 error 'books' is already declared in the upper scope       no-shadow 
    17:12 warning 'error' is defined but never used          no-unused-vars 
    19:9 error Expected an assignment or function call and instead saw an expression no-unused-expressions 
    19:9 error 'error' is already declared in the upper scope  

Cependant, je veux passer le tableau books (renvoyé de l'appel api asynchrone) à l'envoi (fonction anonyme transmise à l'envoi) pour ensuite inclure ledit tableau books dans l'action, que le réducteur recevra.

Est-ce que je fais quelque chose de mal ici?

Même lorsque je renommer la référence interne à books cela n'aide pas.

Il est possible que je suis sur quelque chose dans ES6 ici .. Mais je veux essentiellement de prendre le tableau books retour de l'appel api (en tant que paramètre de la méthode then), et passe ensuite dans la fonction dispatch intérieur que, en tant que paramètre de la fonction anonyme, je passe.

Toute aide avec ce serait excellent. Merci!

Answer 1

Je ne sais pas si c'est la source du problème, mais pourquoi avez-vous besoin de l'intérieur ref des livres? Votre erreur msg/linter se plaint à ce sujet.

... 
    api 
.books() 
.perPage(-1) 
.then(books => 
    dispatch({ 
    type: FETCH_BOOKS, 
    books, 
    }) 
).catch(error => dispatch({type: ERROR, error})) 

pourquoi ne pas faire ce que vous voulez?

aucune fonction dans l'envoi nécessaire ici.

expédition a besoin d'une action simple. Une fonction de dispatch vous donne l'erreur. Lorsque vous voyez une fonction dans dispatch dans les docs, ces fonctions sont des appels de fonction qui ne font que renvoyer l'action. Vos fonctions ne sont que des instructions et ne retournent pas l'action à la répartition.

export someActionCreator =() => ({type: ACTION, payload}) 
dispatch(someActionCreator()); 

qui serait plus semblable à quelque chose comme

export someActionCreator =() => ({type: ACTION, payload}) 
dispatch(someActionCreator); 

voir la différence?

Espérons que cela aide!