Redux thunk 不适用于 Axios 和 async/await答案

【问题标题】：Redux thunk not working with Axios & async/awaitRedux thunk 不适用于 Axios 和 async/await
【发布时间】：2021-09-11 08:00:33
【问题描述】：

在使用 react 将其他参数传递给 redux 中的 thunk 时，我遇到了一个一致的问题。我在 redux 商店中使用 applyMiddleware(thunkMiddleware)。

我有一个与 axios.get 配合使用的代码版本，用于检索数据库中的所有记录。这很好用：

export async function fetchCollection(dispatch, getState) {
    return await axios
        .get(apiAddress + "/collections")
        .then(response => {
            dispatch({
                type: 'collectionLoaded',
                payload: response.data,
            })
        })

}

但是，当我尝试修改此函数以便最终传入一个变量然后返回一个 thunk 时，我什么也得不到。下面的内容基本上是从 redux 网站复制和粘贴的，但不起作用。我在页面加载时运行该函数来填充状态。这不会 ping 我的后端服务器，dispatch 似乎没有运行（状态从未在 redux 开发工具中更新）。

export function fetchCollection() {

    console.log("api: ", apiAddress + "/collections")

    return async function fetchCollectionThunk(dispatch, getState) {
        await axios
            .get(apiAddress + "/collections")
            .then(response => {
                dispatch({
                    type: 'collectionLoaded',
                    payload: response.data,
                })
            })
    }
}

我对第二个函数的计划是传入用户 ID，这样我就可以从 API 请求相关数据。我投入的console.log 确实运行了，但没有别的。如果我在.then 函数中添加console.log，它不会运行。

为简单起见省略了捕获/错误处理，但第一个代码块运行时没有。

不确定我是否遗漏了什么，或者我疯了。我以前在 axios 和 redux 上遇到过这个问题，但无法找出原因。非常感谢任何帮助！

编辑：

回答几个问题：

在初始加载时调度操作。对于开发，我使用它来预先填充状态。最终，将涉及更多的复杂层，但需要首先使其工作。这里是发送动作的地方：

Index.js

store.dispatch(fetchCollection)


ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

【问题讨论】：

当您使用then 时，您不需要async/await。另外，你是如何调度那个 thunk 动作的？
你怎么调用fetchCollection函数，能否分享一下组件代码以及它是如何连接到redux和all的
您能否提供一个指向 react-redux 源文档的链接，其中包含您尝试使用的代码示例？他们看起来很奇怪。通常，您会编写一个异步操作创建器，它返回一个简单地使用 dispatch 对象的函数，即 const myAsyncAction = (arg1, arg2,...) => dispatch => { .... }。
@DrewReese 的回答似乎不错！你也可以看看createAsyncThunk from redux-toolkit
感谢大家的回复！ apokryfos 和 GulamHussain，我将编辑我上面的帖子并做出回应。 @Drew Reese，这里是 Redux 教程的链接，它们在其中做的事情基本相同（授予 fetch 而不是 Axios）：Redux Fundamentals

标签： reactjs react-redux axios redux-thunk

【解决方案1】：

感谢@DrewReese，问题得以解决。我上面代码的问题是，当我在 index.js 中调用 action 时，我传递的是包装函数 (fetchCollection)，而不是执行它并传递 return。

现在动作调度看起来像这样：

store.dispatch(fetchCollection())

按预期工作。

谢谢大家！

【讨论】：