2017-05-21 4 views
0

Ich versuche, eine React + Redux-App zu erstellen, und ich verwende Redux Thunk.Redux Thunk/Eslint erro

Einer meiner Aktion Schöpfer sieht wie folgt aus:

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, 
     })) 
    ); 

Aber wenn ich yarn run build:production laufen bekomme ich den Fehler (e):

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  

Allerdings möchte ich die books Array übergeben (von dem asynchronen api-Aufruf zurückgegeben) an den Versand (anonyme Funktion, die an den Versand übergeben wurde), um dann das books-Array in die Aktion einzuschließen, die der Reduzierer erhalten wird.

Mache ich hier etwas falsch?

Auch wenn ich den inneren Verweis auf books umbenenne, hilft es nicht.

Es ist möglich, dass ich hier etwas in ES6 bin mit Blick auf .. Aber ich mag im Grunde aus dem API-Aufruf die books Array nehmen zurück (als Parameter der then-Methode), und es dann in die dispatch Funktion übergibt innerhalb von das, als ein Parameter der anonymen Funktion, die ich übergebe.

Jede Hilfe mit diesem würde ausgezeichnet sein. Vielen Dank!

Antwort

2

Ich bin mir nicht sicher, ob dies die Ursache des Problems ist, aber warum brauchen Sie überhaupt den inneren Verweis auf Bücher? Ihr Fehler msg/linter beschwert sich darüber.

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

warum wird das oben genannte nicht tun, was Sie wollen?

keine Funktion im Versand erforderlich hier.

Versand benötigt eine einfache Aktion. Eine Funktion im Versand gibt Ihnen den Fehler. Wenn Sie in der Dokumentation Funktionen in der Verteilung sehen, handelt es sich bei diesen Funktionen um Funktionsaufrufe, die nur die Aktion zurückgeben.

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

Ihre Funktionen sind nur Anweisungen und geben die Aktion nicht an den Versand zurück. was würde eher etwas wie

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

sehen Sie den Unterschied?

Hoffe, das hilft!

+0

Sie haben völlig Recht! Vielen Dank :) Verschieben der inneren Ref zu 'Bücher' /' Fehler' löst es, aber auch Ihre Erklärung macht total Sinn (ich bin ziemlich neu in ES6). Prost –

Verwandte Themen