Redux Thunk / Eslint erro

Question

我正在尝试构建一个React + Redux应用程序，而我正在使用Redux Thunk。

我的一个动作创建者看起来像这样：

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

但是当我运行yarn run build:production时，我得到了错误：

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    

但是，我想将books数组（从异步api调用返回）传递给dispatch（传递给dispatch的匿名函数），然后在动作中包含所述books数组，reducer将接收该数组。

我在这里做错了吗？

即使我将内部引用重命名为books也无济于事。

我可能在这里忽略ES6中的某些东西..但我基本上想要从api调用返回的books数组（作为then方法的参数），然后将其传递到其中的dispatch函数中，作为我传入的匿名函数的参数。

对此的任何帮助都会很棒。谢谢！

Answer 1

我不确定这是否是问题的根源，但为什么你需要内部参考书呢？你的错误msg / linter抱怨这个。

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

为什么上面不会做你想要的？

这里没有必要的调度功能。

派遣需要一个简单的行动。调度中的函数会给您错误。当你在docs中看到dispatch中的函数时，那些函数是刚刚返回动作的函数调用。

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

您的函数只是语句，不会将操作返回给调度。这更像是类似的东西

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

看到不同？

希望这可以帮助！