Redux (RangeError): The call stack has exceeded its maximum size limit

After successfully adding Redux for state management in my project, everything was working fine until I introduced reducers and middleware to fetch data. The problem arose when I started running the app and using dispatch (not necessarily on new actions), causing the app to crash with the error message "Unhandled Rejection (RangeError): Maximum call stack size exceeded" displayed in the console.

I suspect that the next(action) in each middleware function is triggering the issue, but I'm still unsure how to resolve it.

The versions I am using are React 17.0.2, react-redux 7.2.3, and redux 4.1.2.

Actions -> data.js :

...

Middleware -> data.js

...

Middleware -> api.js

...

Reducers -> data.js

...

store.js:

...
reactjsreduxreact-redux

Answer №1

Identified the issue :)

In the middleware file named data.js, I realized that I was dispatching onLoading (dispatch(onLoading()) before the switch statement, which led to exceeding the call stack size. To solve this problem, I made a change by moving dispatch(onLoading()) inside each case of the switch:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

New content appears in Material UI v4 Textfield after being typed

One interesting issue I'm facing is with a list of TextFields on the page where users can input text. The variable data holds the dataset. The problem is, as shown in the gif below, there is a delay in displaying the text after the user types. I initi ...

reactjsnext.jsmaterial-ui

Using React Router in conjunction with Nginx

I've been struggling to configure nginx with react router. Despite trying various suggested solutions, none of them seem to address my specific case. Here is the directory structure on my filesystem served by nginx /path/to/my/app |- v1.0/index.html ...

reactjsnginxreact-router

Despite setting `staleTime` to Infinity, React Query continues to trigger refetches

export function retrieveAllUsers() { return useQuery<UserResponseDto[]>({ queryKey: [QueryClientKeys.GET_ALL_USERS], queryFn: async () => { const response = await http.get< UserResponseDto[], ...

reactjsreact-query

Utilizing React refs for interactive tab panels

Currently, I am utilizing React along with material-ui and material-table in my project. One issue I am facing is with a closable tab panel where the corresponding panel components are not unmounted when tabs are switched. Instead, they are just hidden wi ...

reactjstabsmaterial-tablerefs

Can React Native support styling using server-side data?

One of my React Native (RN) components is rendering data from an external server. The data is enclosed within RN components. For example: ... <View> <Text>{this.props.db.greeting}</Text> </View> The 'DB' object is si ...

javascriptreactjsreact-nativejsx

Issue encountered while transferring JSON array data into the Material UI React table

import React, {Component} from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from & ...

reactjsmaterial-uireact-table

Creating a responsive Material UI Container Component is imperative for ensuring a user

Is there a way to have the Container Component with a maxWidth Prop that changes based on Theme Breakpoints? If not, what is the best approach to achieve this functionality? ...

reactjsmaterial-ui

Customize Individual Rows in a React DataGrid

I am exploring the world of Material UI React data grid for the first time, and I am looking to add a unique background color to only the initial three rows. Each row should have a different color scheme that remains static, without any interactions trigge ...

cssreactjsdatagridmaterial-ui

What could be causing the error message about undefined classes to appear?

Just started using React and I'm encountering an error with undefined classes. Can someone help me understand why this is happening? Here's the code snippet for reference: const styles = (theme) => ({ root: { width: "100%" ...

reactjsmaterial-ui

No content appearing on React screen

I initialized a fresh react project using "npx create-react-app name". After removing unnecessary files, the application no longer displays anything. I've encountered issues with react-router and defining routes as well. index.html: <!DOCTYPE html ...

javascriptreactjs

Does deploying on Heroku cause Material UI makeStyles to disappear?

After deploying to Heroku, I noticed that all my MUI makeStyles calls are being removed, causing a major issue with the appearance of my app. Before resorting to inline styling (which I tested and confirmed works), I wanted to seek advice on this matter. ...

reactjsherokumaterial-uiclassnamemakestyles

ReactStrap: Difficulty concealing navbar item based on screen dimensions

Currently, I am referring to the official documentation to implement a scenario where a NavItem is only displayed for screen sizes greater than sm. As per the guidelines provided in the documentation, I have included the following attributes: https://i ...

htmlcssreactjsbootstrap-4reactstrap

Unlocking Node.js packages within React JS is a seamless process

Currently, I am developing a React Serverless App with AWS. I am looking for ways to incorporate a Node JS specific package into the React JS code without requiring Node JS on the backend. One package that I need access to is font-list, which enables list ...

javascriptnode.jsreactjsnpmserverless

Creating React Components with TypeScript: Ensuring Typechecking in Class and Function Components

Want to ensure typechecking works when defining React Class/Function components in TypeScript? Struggling to find a comprehensive guide on how to do it correctly. I've managed to define the Props and State interfaces, but I'm unsure about how to ...

reactjstypescriptcomponents

Why does the data in useState only update after clicking the button for the second time?

When utilizing useState to set a value, I noticed that it only updates upon clicking the button for the second time. Why does this occur? const DropDownMenu = ({ element, segmentEnd, segmentStart }) => { const [open, setOpen] = React.useState(false); ...

javascriptreactjsmaterial-uiuse-state

Tips for resolving issues with adjusting row height when using expandable rows in a react virtualized list

I've recently encountered a challenge with expandable panels (Material-UI) within rows in a react virtualized list. The problem lies in the auto-adjusting heights of the panels, and despite researching similar issues on Stack Overflow and the react-vi ...

reactjsmaterial-uireact-virtualized

Is it possible to circumvent making a double-API call using the getServerSideProps feature in NextJS?

Exploring the workings of NextJS' getServerSideProps, I've noticed an interesting pattern. Upon initially loading a page, the content is fully hydrated. However, upon navigating to a new page, an API call is triggered to fetch JSON data that will ...

reactjsnext.js

Setting up React Context API with TypeScript: A Step-by-Step Guide

I recently updated my app.js file to app.tsx for improved functionality. However, I encountered an error with the current value. app.tsx import React, { createContext, useState } from "react"; import SelectPage from "./pages/select/select& ...

reactjstypescript

The `columns` parameter is a required field in the `ForwardRef(DataGrid)` component, however it has been left with an undefined value

Encountering a strange issue with the MUI datagrid. Check out the code snippet below: const mcolumns=[ { field: "firstname", headerName: "Firstname" }, { field: "lastname", headerName: "Lastname"} ] const pa ...

reactjsmaterial-uidatagrid

How can I fix the position of the close button when using the paper component of a modal in material ui to ensure responsiveness on the screen

I recently created a cards page where multiple cards are displayed. Each card opens a modal component when clicked, but unfortunately, the close button is not functioning properly. Here's an image showing the issue with the button's position whe ...

javascriptcssreactjsreact-hooksmaterial-ui