如何在 redux action 中链接 promise

Posted 2023-02-22

【中文标题】如何在 redux action 中链接 promise

【英文标题】：How to chain promise in redux action

【发布时间】：2017-02-08 12:59:39

【问题描述】：

如何在 redux 操作中先调用 api，然后调度 GET_TODOs？

// first the api call has to be made,

    export function getTodos() 
    return 
          type: 'GET_TODOS',
          promise: request.get(API_URL)
      
    

然后它需要解析响应

// using https://github.com/Leonidas-from-XIV/node-xml2js
parseString(res, function (err, result) 
          // data gets parsed here
);

然后它必须发送 raise 事件。我尝试如下，但它抛出错误

const request = axios.get(url).then(res=>
parseString(res, function (err, result) 
if(result)
      dispatch(
         type: GET_TODOS,
      data:result
    )

if(err) throw err
   );
).catch(err=>console.error(error))
  ;

我遇到错误

错误：动作必须是普通对象。使用自定义中间件进行异步操作。

【参考方案1】：

使用thunk middleware。您的操作如下所示：

export const GET_TODOS = 'GET_TODOS'
export const GET_TODOS_SUCCESS = 'GET_TODOS_SUCCESS'
export const GET_TODOS_FAILURE = 'GET_TODOS_FAILURE'

export function getTodos() 
  return dispatch => 
     dispatch(
        type: GET_TODOS
     )

     fetch(url) // or whatever way you're making API call
        .then(res => 
           parseString(res, (err, result) => 
              if (err) 
                 throw err
              

              dispatch(
                 type: GET_TODOS_SUCCESS,
                 payload: result
              )
           )
        )
        .catch(err => 
              dispatch(
                 type: GET_TODOS_FAILURE,
                 payload: err
              )
        )
  

【讨论】：

看起来很干净，我正在使用以下 redux 样板，你认为如果我只是用 thunk 替换 promise 中间件并且它会自动工作吗？ github.com/bananaoomarang/isomorphic-redux

我正在使用 axios 进行调用，因为它在客户端和服务器端都适用于 isomorphchc

@kobe 你可以这样做，但我认为 thunk 中间件不需要你删除 promise 中间件。看到这个***.com/a/36578210/162461