用react redux做一个函数助手

Question

I'm new to react / redux

When I doing the project in jquery I will make some functions like this:

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

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

In the new project,

I use the axios to call API in the api helper

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

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

And I use the Store to trigger the show/hide popUp , I will use dispatch(showPopup()) and dispatch(showPopup(hide)) in component

But I want that if api function have error , will pass the response in to the errorHandler , then dispatch the showPopup. I don't have idea how to add this into the exported function.

Any suggestion or example?

Answer 1

this is my abstraction of axios request, I use it in services that are used with 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

There are more library to handle redux async action calls. I use redux-thunk another well known library is redux-saga. With redux thunk you will add a middleware to redux and this way you can create async action creators which return a function, and they can call other action creators depending of the result of the async call.

You add the middleware this way:

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)
);

And your action creator will be something like this:

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

So if your getDataList retrun an axios promise, on success it will call an action wit the result. On error it can call the error dialog.