сделать помощник функции с реагировать редукса - PullRequest
Новая
       23

сделать помощник функции с реагировать редукса

0 голосов
/ 19 декабря 2018

Я новичок в реакции / redux

Когда я делаю проект в jquery, я сделаю несколько функций, подобных этой: 

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

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

В новом проекте

Я использую axios для вызова API в API помощника 

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

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

И я использую Store, чтобы вызвать всплывающее окно show / hide, я буду использовать dispatch(showPopup()) и dispatch(showPopup(hide)) в компоненте

Но я хочу, чтобы, если функция API имела ошибку, передала ответ в errorHandler, а затем отправила showPopup.Я понятия не имею, как добавить это в экспортируемую функцию.

Любое предложение или пример?

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Существует больше библиотек для обработки вызовов асинхронных операций с избыточностью.Я использую 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, в случае успеха он вызовет действие с результатом,При ошибке он может вызвать диалог ошибки.

0 голосов
/ 19 декабря 2018

это моя абстракция запроса 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;
...