title: React Redux Confirmation action box error: Application state or actions payloads are too large
body: <p>Hi I am trying to create a simple popup box showing a validation Text and input field, the user needs to insert some text into the input for confirmation, then click "Confirm" appon clicking confirm a function will be executed.</p>
  
  <p>the confirmation component will receive this props:
  isOpen - boolean,
  msg - string,
  executableFunction - function</p>
  
  <p>this three props will be received via Redux Store because this component is shared by many other components I placed it at my app.js file.</p>
  
  <p>I tested it in a small example and it works, but when I tried to implement it for real I got this error: 
  "
  VM594 react_devtools_backend.js:6 Application state or actions payloads are too large making Redux DevTools serialization slow and consuming a lot of memory. See <a href="https://git.io/fpcP5" rel="nofollow noreferrer">https://git.io/fpcP5</a> on how to configure it.
  " </p>
  
  <p>I imagine the executable function is too big, its a function that make a http post request to a server gets a response back and make changes to a component (basically show to the user the result of the execution...).</p>
  
  <p>is there a way around this problem ? what am I doing wrong ?</p>
  
  <p>the confirmation component:</p>
  
  <pre><code>import React, { useState } from "react";
  import {connect} from "react-redux";
  import { setConfirmation } from '../../../actions/sharedComponentsAction';
  import PropTypes from "prop-types";
  import { toastr } from "react-redux-toastr";
  import { makeStyles } from '@material-ui/core/styles';
  import Modal from '@material-ui/core/Modal';
  import Backdrop from '@material-ui/core/Backdrop';
  import Fade from '@material-ui/core/Fade';
  import {handleChange} from "../../functionUtils/FunctionsUtils";
  import TextField from "@material-ui/core/TextField";
  import Button from "@material-ui/core/Button";
  
  const useStyles = makeStyles((theme) =&gt; ({
      modal: {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
      },
      paper: {
          backgroundColor: theme.palette.background.paper,
          border: '2px solid #000',
          boxShadow: theme.shadows[5],
          padding: theme.spacing(2, 4, 3),
      },
      textField: {
          width: '400px',
          marginTop: theme.spacing(2),
          marginBottom: theme.spacing(6),
      },
      button: {
          width: 120,
      },
  }));
  
  const ConfirmationPopupValidateXXX = ({ selectedClient, setConfirmation, isOpen ,message, validationHelperText, executableFunction }) =&gt; {
      const { XXX } = selectedClient.value;
  
      const [InputtedXXX, setInputtedXXX] = useState('');
  
      const handleClose = async () =&gt; {
          await console.log('handleClose Called');
          await setConfirmation(false);
      };
  
      const validateAndExecuteFunction = () =&gt; {
          console.log('validateAndExecuteFunction called');
  
          if ( XXX !== InputtedXXX )
          {
              toastr.error('XXX Name Doesnt Equal Selecte Client\'s XXX');
              return;
          }
  
          executableFunction();
  
          handleClose();
      };
  
      const classes = useStyles();
      return (
          &lt;div&gt;
              &lt;Modal
                  aria-labelledby="transition-modal-title"
                  aria-describedby="transition-modal-description"
                  className={classes.modal}
                  open={isOpen}
                  onClose={handleClose}
                  closeAfterTransition
                  BackdropComponent={Backdrop}
                  BackdropProps={{
                      timeout: 500,
                  }}
              &gt;
                  &lt;Fade in={isOpen}&gt;
                      &lt;div className={classes.paper + ' material-ui'}&gt;
                          &lt;div&gt;
                              &lt;h3&gt;Confirmation Required&lt;/h3&gt;
                              &lt;div style={{whiteSpace: 'pre-wrap'}}&gt;
                                  {message}
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;TextField
                              label="XXX Name"
                              helperText={validationHelperText}
                              className={classes.textField}
                              value={InputtedXXX}
                              onChange={handleChange(setInputtedXXX)}
                              margin="normal"
                          /&gt;
  
                          &lt;div className={'flex-space'} style={{textAlign: 'right'}}&gt;
                              &lt;Button className={classes.button} variant="contained" color="primary" onClick={ handleClose }&gt;
                                  CANCEL
                              &lt;/Button&gt;
  
                              &lt;Button className={classes.button} disabled={InputtedXXX === ''} variant="contained" color="primary" onClick={ validateAndExecuteFunction }&gt;
                                  CONFIRM
                              &lt;/Button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/Fade&gt;
              &lt;/Modal&gt;
          &lt;/div&gt;
      );
  };
  
  ConfirmationPopupValidateXXX.defaultProps = {
      validationHelperText: 'Type the XXX name to confirm creation',
  };
  
  ConfirmationPopupValidateXXX.prototypes = {
      selectedClient: PropTypes.object.isRequired,
      setConfirmation: PropTypes.func.isRequired,
      isOpen: PropTypes.bool.isRequired,
      message: PropTypes.string,
      validationHelperText: PropTypes.string,
      executableFunction: PropTypes.func.isRequired,
  };
  
  const mapStateToProps = state =&gt; ({
      selectedClient: state.client.selectedClient,
  });
  
  export default connect(mapStateToProps, { setConfirmation })(ConfirmationPopupValidateXXX);
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/0yWyk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0yWyk.png" alt="enter image description here"></a></p>
  
  <p>This is how I added the confirmation box to app.js</p>
  
  <pre><code>{ isConfirmationOpen &amp;&amp;
       &lt;ConfirmationPopupValidateXXX
           isOpen={isConfirmationOpen}
           message={confirmationMessage}
           validationHelperText={confirmationValidationHelperText}
           executableFunction={confirmationExecutableFunction}
        /&gt;
  }
  </code></pre>
  
  <pre><code>await setConfirmation(true, msg, functionToExecute); // setConfirmation will dispatch this three variables to the store where ConfirmationPopupValidateXXX will use them
  
  
  const functionToExecute = async () =&gt; {
     // call server
     // get response
     // useState - change component state add response Message so the client can see what is the response of the action he performed
  };
  </code></pre>