Redux：使用异步中间件与成功功能上的调度动作

大佬教程收集整理的这篇文章主要介绍了Redux：使用异步中间件与成功功能上的调度动作，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决Redux：使用异步中间件与成功功能上的调度动作？

我个人更喜欢使用自定义中间件来完成此任务。它使操作更容易遵循，并减少了IMO的样板。

我已经设置了中间件来查找从匹配特定签名的操作返回的对象。如果找到此对象架构，则将对其进行特殊处理。

例如，我使用一个看起来像这样的动作：

export function fetchData() {
  return {
    types: [ FETCH_DATA, FETCH_DATA_succesS, FETCH_DATA_FAILURE ],
    promise: API => API('foo/bar')
  }
}

我的自定义中间件看到对象具有types数组和promise函数，并对其进行了特殊处理。看起来是这样的：

import 'whatwg-fetch';

function isrequest({ promise }) {
  return promise && typeof promise === 'function';
}

function checkStatus(responsE) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  } else {
    const error = new Error(response.statusText || response.status);
    error.response = response.Json();
    throw error;
  }
}

function parseJsON(responsE) {
  return response.Json();
}

function makerequest(urlBase, { promise, types, ...rest }, next) {
  const [ requEST, succesS, FAILURE ] = types;

  // dispatch your request action so UI can showing loading inDicator
  next({ ...rest, type: requEST });

  const API = (url, params = {}) => {
    // fetch by default doesn't include the same-origin header.  Add this by default.
    params.credentials = 'same-origin';
    params.method = params.method || 'get';
    params.headers = params.headers || {};
    params.headers['Content-Type'] = 'application/Json';
    params.headers['Access-Control-Allow-Origin'] = '*';

    return fetch(urlBase + url, params)
      .then(checkStatus)
      .then(parseJsON)
      .then(data => {
        // dispatch your success action
        next({ ...rest, payload: data, type: succesS });
      })
      .catch(error => {
        // dispatch your failure action
        next({ ...rest, error, type: FAILURE });
      });
  };

  // Because I'm using promise as a function, I create my own simple wrapper
  // around whatwg-fetch. Note in the action example above, I supply the url
  // and optionally the params and Feed them directly into fetch.

  // The other benefit for this approach is that in my action above, I can do 
  // var result = action.promise(API => API('foo/bar'))
  // result.then(() => { /* something happened */ })
  // This allows me to be notifIEd in my action when a result comes BACk.
  return promise(API);
}

// When setTing up my APIMIDdleware, I pass a base url for the service I am
// using. Then my actions can just pass the route and I append it to the path
export default function APIMIDdleware(urlBasE) {
  return function() {
    return next => action => isrequest(action) ? makerequest(urlBase, action, next) : next(action);
  };
}

我个人喜欢这种方法，因为它集中了很多逻辑，并为您提供了有关API动作的结构的标准实施方式。不利的一面是，对于那些不熟悉redux的人来说，这可能有些神奇。我还使用了thunk中间件，到目前为止，这两者都可以满足我的所有需求。

解决方法

componentDidMount() {
  getData();
}

getData() {
  const self = this;

  ajax({
    url: apiUrl,})
  .success(function(data) {
    self.setState({
      data: data,});
  })
  .error(function() {
    throw new Error('Server response failed.');
  });
}

大佬总结

以上是大佬教程为你收集整理的Redux：使用异步中间件与成功功能上的调度动作全部内容，希望文章能够帮你解决Redux：使用异步中间件与成功功能上的调度动作所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。