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 数组在 action 中，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}))

为什么以上不能满足您的要求？

这里不需要调度函数。

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

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

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

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

看出区别了吗？

希望对您有所帮助！

Redux Thunk / Eslint 错误

Redux Thunk / Eslint erro

redux

redux-thunk

react-redux