Redux Thunk / Eslint 错误

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 调用返回）传递给调度（传递给调度的匿名函数），然后将所述books 数组包含在减速器将接收的动作中。

我在这里做错了吗？

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

我可能在这里忽略了 ES6 中的某些内容。但我基本上想获取从 api 调用返回的 books 数组（作为 then 方法的参数），然后将其传递给 @ 987654329@函数里面，作为我传入的匿名函数的参数。

对此的任何帮助都会非常好。谢谢！

Answer 1

我不确定这是否是问题的根源，但为什么您需要书籍的内部参考？您的错误消息/linter 正在抱怨这一点。

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

为什么上面的不能做你想做的？

这里没有必要的调度函数。

dispatch 需要一个简单的操作。调度中的一个函数给你错误。 当您在文档中看到 dispatch 中的函数时，这些函数是仅返回操作的函数调用。

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

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

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

看到区别了吗？

希望这会有所帮助！