用 react redux 做一个函数助手答案

【问题标题】：make a function helper with react redux用 react redux 做一个函数助手
【发布时间】：2018-12-19 13:00:23
【问题描述】：

我是 react/redux 的新手

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

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

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

在新项目中，

我使用axios在api helper中调用API

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

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

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

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

有什么建议或例子吗？

【问题讨论】：

您可以结帐github.com/orar/questrar来处理请求状态

标签： javascript reactjs redux react-redux axios

【解决方案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;

【讨论】：

【解决方案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 承诺，成功时它将调用一个带有结果的操作。出错时可以调用错误对话框。

【讨论】：