0

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

这些动作可以在不同的文件中，并由负责不同状态分支的不同 reducer 监听。

我正在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完成时。

由于 promise 中间件，我发现很难拦截调用并计算/确定已发出多少个 ajax 请求以及已完成多少个请求，因为这些操作是预先确定的，我无法从我的 reducer 发送另一个操作。

我显然可以在那里更新状态，但是异步操作可能会分散到状态树的几个部分，所以我没有一个整体的地方来管理请求。

有谁知道我如何解决这类问题。如果描述/用例不清楚，请大声喊叫。

4

2 回答 2

0

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

redux 挂起

于 2017-02-06T12:50:35.953 回答
-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) 操作会将结果返回给减速器，因此最后一次 fetch 调用您必须编写 3 个方法。

1.您将从组件调用的函数

export function asyncAction(){..}

2.函数谁将向这个函数写承诺

function fetchCall(){...}

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

function handleAsyncData(data){....}
于 2017-02-06T10:21:26.080 回答