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

Question

一些背景:当我使用简单的 .then() 链接获取和分派(dispatch)响应时，我能够让一切正常工作。我现在遇到的错误是当我尝试使我的操作异步并在 promises 上使用 await 时。

注意:我使用的是 redux thunk。

Action .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
  }
}

Answer 1

async 关键字将确保返回一个 promise，而您不想返回一个 promise，而是一个函数。

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

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