redux（RangeError）：超出最大调用堆栈大小

Question

我将redux添加到我的项目中进行状态管理，在添加reducer之前一切都很好

我认为每个中间件功能的下一步（操作）都会导致问题，但我不知道如何修复它。

我使用的是React 17.0.2，React redux 7.2.3，redux 4.1.2。

动作--

export const GET_CUSTOMERS = '[data] fetch customers';
export const GET_CLIENTS = '[data] fetch clients';
export const GET_USERS = '[data] fetch users';
export const GET_LPS = '[data] fetch LPS';
export const GET_METIS = '[data] fetch metis';
export const GET_CYBERCURE = '[data] fetch cybercure';
export const GET_SIMON = '[data] fetch simon';
export const GET_REPORTS = '[data] fetch reports';
export const CLIENTS_SUCCESS = '[data] fetch clients success';
export const CLIENTS_ERROR = '[data] fetch clients error';
export const USERS_SUCCESS = '[data] fetch users success';
export const USERS_ERROR = '[data] fetch users error';
export const LPS_SUCCESS = '[data] fetch lps success';
export const LPS_ERROR = '[data] fetch lps error';
export const METIS_SUCCESS = '[data] fetch metis success';
export const METIS_ERROR = '[data] fetch metis error';
export const CYBERCURE_SUCCESS = '[data] fetch cybercure success';
export const CYBERCURE_ERROR = '[data] fetch cybercure error';
export const SIMON_SUCCESS = '[data] fetch simon success';
export const SIMON_ERROR = '[data] fetch simon error';
export const REPORTS_SUCCESS = '[data] fetch reports success';
export const REPORTS_ERROR = '[data] fetch reports error';
export const UPDATE_CLIENTS = '[data] updating clients state';
export const UPDATE_USERS = '[data] updating users state';
export const UPDATE_LPS = '[data] updating lps state';
export const UPDATE_METIS = '[data] updating metis state';
export const UPDATE_CYBERCURE = '[data] updating cybercure state';
export const UPDATE_SIMON = '[data] updating simon state';
export const UPDATE_REPORTS = '[data] updating reports state';

export const getCustomers = (role) => ({
    type: GET_CUSTOMERS,
    payload: role
});

export const getClients = () => ({
    type: GET_CLIENTS
});

export const getUsers = () => ({
    type: GET_USERS
});

export const getLps = () => ({
    type: GET_LPS
});

export const getMetis = () => ({
    type: GET_METIS
});

export const getCybercure = () => ({
    type: GET_CYBERCURE
});

export const getSimon = () => ({
    type: GET_SIMON
});

export const getReports = () => ({
    type: GET_REPORTS
});

export const updateClients = (data) => ({
    type: UPDATE_CLIENTS,
    payload: data
});

export const updateUsers = (data) => ({
    type: UPDATE_USERS,
    payload: data
});

export const updateLps = (data) => ({
    type: UPDATE_LPS,
    payload: data
});

export const updateMetis = (data) => ({
    type: UPDATE_METIS,
    payload: data
});

export const updateCybercure = (data) => ({
    type: UPDATE_CYBERCURE,
    payload: data
});

export const updateSimon = (data) => ({
    type: UPDATE_SIMON,
    payload: data
});

export const updateReports = (data) => ({
    type: UPDATE_REPORTS,
    payload: data
});

中间件--

import Swal from "sweetalert2";
import { apiRequest } from "../actions/api";
import { CLIENTS_ERROR, CLIENTS_SUCCESS, ... } from "../actions/data";
import { endLoading, onLoading } from "../actions/ui";

export const dataFlow = ({dispatch}) => (next) => (action) => {
    next(action);
    const role = action.payload;
    let url = `${process.env.REACT_APP_HOST_URL}/pax/`;
    const fd = new FormData();
    fd.append("type", "show");
    
    dispatch(onLoading());

    switch(action.type){
        case GET_CLIENTS:
            dispatch(apiRequest("POST", `${url}clients`, fd, CLIENTS_SUCCESS, CLIENTS_ERROR));
            return dispatch(endLoading());
        case GET_USERS:
            dispatch(apiRequest("POST", `${url}users`, fd, USERS_SUCCESS, USERS_ERROR));
            return dispatch(endLoading()); 
        case GET_LPS:
            dispatch(apiRequest("POST", `${url}lps`, fd, LPS_SUCCESS, LPS_ERROR));
            return dispatch(endLoading());
        case GET_METIS:
            dispatch(apiRequest("POST", `${url}metis`, fd, METIS_SUCCESS, METIS_ERROR));
            return dispatch(endLoading());
        case GET_CYBERCURE:
            dispatch(apiRequest("POST", `${url}cybercure`, fd, CYBERCURE_SUCCESS, CYBERCURE_ERROR));
            return dispatch(endLoading()); 
        case GET_REPORTS:
            dispatch(apiRequest("POST", `${url}reports`, fd, REPORTS_SUCCESS, REPORTS_ERROR));
            return dispatch(endLoading()); 
        default: return;
    }

}

export const dataProcess = ({dispatch}) => (next) => (action) => {
    next(action);


    switch(action.type){
        case CLIENTS_SUCCESS:
            return dispatch(updateClients(action.payload));
        case USERS_SUCCESS:
            return dispatch(updateUsers(action.payload));
        case LPS_SUCCESS:
            return dispatch(updateLps(action.payload));
        case METIS_SUCCESS:
            return dispatch(updateMetis(action.payload));
        case CYBERCURE_SUCCESS:
            return dispatch(updateCybercure(action.payload));
        case SIMON_SUCCESS:
            return dispatch(updateSimon(action.payload));
        case REPORTS_SUCCESS:
            return dispatch(updateReports(action.payload));
        case CLIENTS_ERROR:
            return Swal.fire("Error!", action.payload, "error");
        case USERS_ERROR:
            return Swal.fire("Error!", action.payload, "error");
        case LPS_ERROR:
            return Swal.fire("Error!", action.payload, "error");
        case METIS_ERROR:
            return Swal.fire("Error!", action.payload, "error");
        case CYBERCURE_ERROR:
            return Swal.fire("Error!", action.payload, "error");
        case SIMON_ERROR:
            return Swal.fire("Error!", action.payload, "error");
        case REPORTS_ERROR:
            return Swal.fire("Error!", action.payload, "error");
        default: return;
    }
}

export const dataMdl = [dataFlow, dataProcess];

中间件--

export const api =
  ({ dispatch }) =>
  (next) =>
 async  (action) => {

    next(action);

  if(action.type === API_REQUEST){
    const { url, method, onSuccess, onError } = action.meta;

    try{
      const response = await fetch(url, { 
        method,
        ...action.payload,
      });
      const data = await response.json();
      return dispatch({ type: onSuccess, payload: data });
    }catch(error){
      return dispatch({ type: onError, payload: error });
    }
  }
 };

减速机 --

const initState = {
    clients: null, 
    users: null, 
    lps: null, 
    metis: null, 
    cybercureusers: null,
    reports: null
};

export const dataReducer = (state = initState, action) => {
    switch(action.type) {
        case UPDATE_CLIENTS:
            return {...state,clients: action.payload};
        case UPDATE_USERS:
            return {...state, users: action.payload};
        case UPDATE_LPS:
            return {...state, lps: action.payload};
        case UPDATE_METIS:
            return {...state, metis: action.payload};
        case UPDATE_CYBERCURE:
            return {...state, cybercureusers: action.payload};
        case UPDATE_REPORTS:
            return {...state, reports: action.payload};      
        default: return state;
    }
}

商店.js：

const composeEnhancers = composeWithDevTools({
    trace: true,
    traceLimit: 25,
  }) 

export const store = createStore(
    reducers, composeEnhancers(
      applyMiddleware(...authMdl, ...rolesMdl, ...dataMdl, api, thunk)
  ));

Answer 1

发现问题了：）

关于中间件——

    switch(action.type){
        case GET_CLIENTS:
            dispatch(apiRequest("POST", `${url}clients`, fd, CLIENTS_SUCCESS, CLIENTS_ERROR));
            return dispatch(onLoading());
        case GET_USERS:
             dispatch(apiRequest("POST", `${url}users`, fd, USERS_SUCCESS, USERS_ERROR));
             return dispatch(onLoading());
        case GET_LPS:
             dispatch(apiRequest("POST", `${url}lps`, fd, LPS_SUCCESS, LPS_ERROR));
             return dispatch(onLoading());
        case GET_METIS:
             dispatch(apiRequest("POST", `${url}metis`, fd, METIS_SUCCESS, METIS_ERROR));
             return dispatch(onLoading());
        case GET_CYBERCURE:
             dispatch(apiRequest("POST", `${url}cybercure`, fd, CYBERCURE_SUCCESS, CYBERCURE_ERROR));
             return dispatch(onLoading());
        case GET_REPORTS:
             dispatch(apiRequest("POST", `${url}reports`, fd, REPORTS_SUCCESS, REPORTS_ERROR));
             return dispatch(onLoading());
        default: return;
    }