redux(RangeError):超过了最大调用堆栈大小

Question

我在我的项目中添加了redux用于状态管理，在添加reduce&用于获取数据的中间件，之后当我运行应用程序并使用分派(不一定是在新操作上(时，应用程序崩溃，控制台上显示的错误是"；未处理的拒绝(RangeError(：超过了最大调用堆栈大小；。

我认为每个中间件功能的下一个(操作(会导致问题，但我不知道如何解决它

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

操作-->data.js:

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

中间件-->data.js

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

中间件-->api.js

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

减速器->data.js

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

store.js:

const composeEnhancers = composeWithDevTools({
trace: true,
traceLimit: 25,
}) 
export const store = createStore(
reducers, composeEnhancers(
applyMiddleware(...authMdl, ...rolesMdl, ...dataMdl, api, thunk)
));

Answer 1

发现问题：(

在中间件上-->data.js我在switch语句之前调度了onLoading(dispatch(onLoading((，这导致调用堆栈大小超出。为了解决这个问题，我将dispatch(onLoading(((移到了交换机的每种情况：

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