Question

我在actions.js文件中执行了以下操作。但我收到错误“操作必须是普通对象。使用自定义中间件进行异步操作。”我假设是因为我把回程放在了一个奇怪的地方。有什么想法吗？

property

Answer 1

您的操作创建者不会返回任何内容 - 您的返回语句属于promise回调的范围，而不是周围的函数。但这就是重点 - 即使你确实从动作创作者那里回复了诺言，Redux也不知道如何处理它！

要执行异步操作，您需要使用redux-thunk或redux-promise等库。我不打算详细介绍如何设置这些库，因为他们的repos上的README做得更好，但这里有一些如何使用它们的例子。

redux-thunk允许您调度一个函数，该函数可以访问dispatch，如下所示：

export function loginLookUp(credentials) {
    // This would look a lot cleaner if you used an ES2015 arrow function
    return function (dispatch) {
        const request = axios.post(`${LOGINLOOKUP_URL}`, credentials).then(function (response) {
            dispatch({
                type: LOGIN_SUCCESS,
                payload: true
            });
         })
         .catch(function (error) {
              dispatch({
                  type: LOGIN_FAIL,
                  payload: false
              });
         });
    }
}

这就像异步操作get一样简单，it's how the official Redux tutorial will teach you to do it - 确保给这些章节读一读，这真的很有帮助！

另一方面，

redux-promise允许您使用promise作为有效负载调度操作：

export function loginLookUp(credentials) {
    return {
        type: LOGIN,
        // Payload must be a promise!
        payload: axios.post(`${LOGINLOOKUP_URL}`, credentials)
    };
}

它不会立即传递给reducer，而是使用.then()等待有效负载中的promise完成。然后，它将以两种形式之一发送动作。

如果promise解析，将调度操作并将有效负载设置为已解析的值，如下所示：

{
    type: LOGIN,
    payload: // The response from the server
}

如果promise失败，将调度操作，并将有效负载设置为被拒绝的值，并将error属性设置为true，如下所示：

{
    type: LOGIN,
    payload: // The error object,
    error: true
}

这绝不是唯一的做事方式 - 有无数的异步动作库，所以如果这些都让你惊慌失措，那么一定会有适合你的其他东西（我听到人们更聪明的东西）比我更redux-saga，但我自己无法理解！）

谈到传奇，这个答案最终比我预想的要长。希望它为你清除东西！

基于登录的Redux异步操作

1 个答案: