Question

我是新来的人/ redux

当我在jquery中做项目时我将做一些这样的功能：

errorHandle (code) {
  if(code = 1){
    $('.popUpA').show()
  }
  ...
}

callAPI (){
  //Do AJAX call
  //If Error , call errorHandle()
}

在新项目中，

我使用axios在api帮助器中调用

export function getDataList(){
  //axios....
}

export function getData(){
  //axios....
}

然后我使用商店触发显示/隐藏弹出窗口，我将在组件中使用dispatch(showPopup())和dispatch(showPopup(hide))

但我希望如果api函数具有error，则将响应传递给errorHandler，然后调度showPopup。我不知道如何将其添加到导出的函数中。

有什么建议或例子吗？

Answer 1

这是我对axios请求的抽象，我在与Redux一起使用的服务中使用它：

import axios from 'axios';
import { API } from '../../constants';

import { revokeAuthAction } from ;

export const getAuth = () => {
 // Auth logic
};

/**
 * Create an Axios Client with defaults
 */
const client = axios.create({
  baseURL: API.BASEURL,
  headers: {
    Authorization: getAuth(),
    'Access-Control-Max-Age': 1728000,
    // 'X-Authorization-JWT':
  },
});

/**
 * Request Wrapper with default success/error actions
 */
const request = (options) => {
  const onSuccess = (response) => options.raw ? response : response.data;
    // console.debug('Request Successful!', response);
    // If options.raw is true, return all response

  const onError = (error) => {
    // console.error('Request Failed:', error.config);

    if (error.response) {
      if (error.response.status === 401) {
        // console.error('Unauthorized');
        store.dispatch(revokeAuthAction());
      } else {
        // Request was made but server responded with something
        // other than 2xx
        // console.error('Status:', error.response.status);
        // console.error('Data:', error.response.data);
        // console.error('Headers:', error.response.headers);
      }
    } else {
      // Something else happened while setting up the request
      // triggered the error
      // console.error('Error Message:', error.message);
    }

    return Promise.reject(error.response || error.message);
  };

  return client(options)
    .then(onSuccess)
    .catch(onError); // in realtà non catcho un bel niente perchè ritorno Promise.reject e quindi il giro ricomincia
};

export default request;

Answer 2

有更多的库来处理redux异步操作调用。我使用redux-thunk另一个著名的库是redux-saga。使用redux thunk，您可以在redux中添加一个中间件，这样您就可以创建返回操作的异步操作创建者，并且他们可以根据异步调用的结果调用其他操作创建者。

您可以通过以下方式添加中间件：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

您的动作创建者将是这样的：

export function requestDataList() {
  return function (dispatch: Function, getState: Function) {
    return getDataList().then(resp => {
      dispatch(dataListReceived(resp.data));
    }).catch(error => {
      dispatch(showPopup(title, error.message));
    });
  };
}

因此，如果您的getDataList重新运行axios承诺，则在成功时它将调用一个操作并返回结果。出现错误时，可以调用错误对话框。

用react redux做一个函数助手

2 个答案: