时间戳

首页 > 解决方案 > 动作必须是普通对象。使用自定义中间件进行异步操作 - React Native Redux

javascript - 动作必须是普通对象。使用自定义中间件进行异步操作 - React Native Redux

问题描述

一些背景知识：当我使用简单的 .then() 链接获取和调度响应时，我能够让一切正常工作。我现在得到的错误是当我试图使我的动作异步，并在 promises 上使用 await 时。

注意：我使用的是 redux thunk。

动作.js：

export const onLoginPressed = async (params) => async (dispatch) => {
  try {
    const loginResp = await fetch("http://localhost:8000/api-token-auth/", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(params)
    })

    let res = await loginResp.text();
    if (response.status >= 200 && response.status < 300) {
      let accessToken = res;
      dispatch(storeToken(accessToken));
    } else {
      let error = res;
      dispatch(failToken())
      throw error;
    }
  } catch (e) {
    console.log(e)
  }

}

export const failToken = () => {
  return {
    type: FAIL_TOKEN
  }
}

export const storeToken = (token) => {
  return {
    type: CREATE_TOKEN,
    token: token
  }
}

标签： javascriptreactjsreact-nativereduxredux-thunk

解决方案

该async关键字将确保返回一个承诺，并且您不想返回一个承诺而是一个函数。

从第一个函数中删除async关键字，它将按预期工作。

export const onLoginPressed = (params) => async (dispatch) => {
  // ...
}

推荐阅读