基于登录的Redux异步操作

Question

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

export function loginLookUp(credentials) { 
    const request = axios.post(`${LOGINLOOKUP_URL}`, credentials).then(function (response) { 

     return { 
      type: LOGIN_SUCCESS, 
      payload: true 
     }; 


    }) 
    .catch(function (error) { 

     return { 
      type: LOGIN_FAIL, 
      payload: false 
     }; 


    }); 


} 

Answer 1

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

为了执行异步操作，您需要使用库，如redux-thunk或redux-promise。我不打算详细介绍如何设置这些库，因为其回购站上的README文件做得更好，但以下是一些如何使用它们的示例。

终极版，形实转换可以让你派遣一个函数，反过来访问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 
       }); 
     }); 
    } 
} 

这是异步的行动得到一样简单，并且it's how the official Redux tutorial will teach you to do it - 确保给那些章节阅读，这真的是有帮助的东西！

终极版-承诺，在另一方面，可以让你发送一个承诺作为有效载荷操作：

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

不是立即被传递到减速的动作，它将使用.then()等待承诺在有效载荷中完成。然后，它将以两种形式之一来发送动作。

如果承诺解决，行动将设置为解决值的有效载荷进行布控，像这样：

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

如果承诺失败，则操作将设置为拒绝的有效载荷被分派值和error属性设置为true，像这样：

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

这些绝不是做事情的唯一途径 - 有无数的异步操作库，因此，如果这些都让你惊恐地退缩，肯定有很多是事端g否则会适合你（我听到人们比我更聪明的关于redux-saga的好东西，但我自己无法理解）！

谈到传说，这个答案结束了比我想要的方式更长。希望它为你清除了一些东西！