Question

我希望我的应用程序知道何时触发异步操作以及何时完成。这样做的原因是我希望我的应用程序的整体loading状态在所有异步操作完成时设置为true。早期的实现使用了一个回调的全局计数器。

这些行动可以在不同的档案中，由不同的减刑者监听，负责不同的国家分支。

我使用thunk-middleware与redux-promise-middleware结合使用，因此我的一个异步操作可能如下所示：

export const requestSiteData = () => (dispatch, getState, api) => {
  const url = '/endpoint';

  return dispatch({
    type: 'STATE_BRANCH/REQUEST_SOME_DATA',
    payload: api.fetch(url)
  }).catch(() => {});
};

这将在完成后发送STATE_BRANCH/REQUEST_SOME_DATA_FULFILLED或STATE_BRANCH/REQUEST_SOME_DATA_REJECTED。

由于承诺中间件，我发现很难拦截呼叫并计算/确定已经完成了多少个ajax请求以及已经完成了多少请求，因为这些操作是预先确定的，我不能从我的减速机发出另一个动作。

我可以在那里更新状态，但异步操作可能会分布在状态树的几个部分，因此我没有整体位置来管理请求。

有没有人有任何想法如何解决这类问题。如果描述/用例不清楚，请大喊大叫。

Answer 1

有一个基于redux-promise的Redux中间件可以帮助您跟踪待处理的操作：

redux-pending

Answer 2

thunk是一个逐个执行的函数链，所以在你的情况下你的异步调用代码应该是

export function asyncAction() {
    return function(dispatch){
        fetchCall().then((data)=>data.json())
           .then((data)=>disptach(handleAsyncDataAction(data))
    }

和fetchCall（）函数应写为。

function fetchCall(){
     return fetch('your_url');
}

并且您的handleAsyncData（data）操作会将结果返回给reducers，因此在一次提取调用结束时，您必须编写3个方法。

您将从Component

调用的

1。功能

export function asyncAction(){..}

2。函数谁会写这个函数的承诺

function fetchCall(){...}

3。和最后一个函数将返回句柄返回数据并将其发送给reducer。

function handleAsyncData(data){....}

Redux thunk动作和共享状态

2 个答案: