Nested Redux action creators call one another

Utilizing ducks alongside Redux, I have multiple action creators within the same file. I am seeking a way to call one action creator from another without the need for double dispatching in every case within the switch statement below:

...
export function closeAuthDialogs() {
  return {type: CLOSE_AUTH_DIALOGS}
}

export function openDialog(dialog) {
  // Close any open dialogs
  dispatch => {dispatch(closeAuthDialogs())} // <--THIS DOES NOT GET CALLED!!!
  // Open the required dialog
  switch (dialog) {
    case 'login':
      return {type: OPEN_LOGIN}
    case 'register':
      return {type: OPEN_REGISTER}
    case 'forgot':
      return {type: OPEN_FORGOT}
    case 'change':
      return {type: OPEN_CHANGE}
    case 'profile':
      return {type: OPEN_PROFILE}
    default:
      return;
  }
}
...

The opening of dialogs works smoothly, but unfortunately, the close function does not trigger. Is there a method to invoke the close function from within the open function without double dispatching for each case in the switch statement?

By mentioning double dispatching, I am referring to...

return dispatch => {
  dispatch({type: CLOSE_AUTH_DIALOGS})
  dispatch({type: OPEN_SOME_DIALOG)}
}

If feasible, I would prefer to execute the close function once and then proceed with the specified open operation.

Thanks in advance!

Answer №1

If you're looking to enhance your Redux functionality, consider utilizing a middleware such as redux-thunk. To install redux-thunk, follow the instructions provided here. Once installed, integrate it into your store setup like this:

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

With redux-thunk in place, you can now return functions from your actions. For example, create an action like this:

export function openDialog(dialog) {
  return (dispatch) => {
    dispatch(closeAuthDialogs());
    switch (dialog) {
      case 'login':
        return dispatch({type: OPEN_LOGIN})
      case 'register':
        return dispatch({type: OPEN_REGISTER})
      case 'forgot':
        return dispatch({type: OPEN_FORGOT})
      case 'change':
        return dispatch({type: OPEN_CHANGE})
      case 'profile':
        return dispatch({type: OPEN_PROFILE})
      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

In order for the JavaScript function to properly execute, it requires the page to be

Check out this code snippet: <script> function scaleDown() { $('.work > figure').removeClass('current').addClass('not-current'); $('nav > ul > li').removeClass('current-li'); ...

Exporting variables in Node.js using module.exports

I am facing an issue with two JavaScript files, a1.js and utils.js. Here is the content of the files: a1.js const namet = require('./utils.js') console.log(name); utils.js console.log('utils.js'); const name ='Mike'; modul ...

Is there a way to generate a 3D triangular curve using a cubic-bezier function connecting 3D points in Three.js?

After exploring this discussion, I am attempting to create a 3D curved triangle using a NURBS surface, but I'm struggling with setting up my 3D points for this task. Here is my current implementation: var edges = this.getEdges(), // An edge is compr ...

Best practices for securely transferring tokens from an HTTP GET request to an HTML page in Node.js

I have been working on developing my own unique password reset system that sends an email to the user with a link to reset their password. Initially, I created a one-of-a-kind token that is included in an http get request link and then emailed to the user ...

What is the best way to supply arguments to a generic handler function?

How can I send parameters to a generic handler in Asp.net using JavaScript/jQuery? I am working on a jQuery plugin called ajaxfileupload that utilizes a generic Handler. I need to pass certain arguments from the page using jQuery or JavaScript, such as Dy ...

Attempting to automate the process of clicking a button on a webpage using cefsharp

Hello, I am currently working with cefsharp and vb.net to develop a code that will help me navigate to the next page of a specific website. The website link is: https://www.recommendedagencies.com/search#{} My goal is to extract the list of company names ...

Attempting to single out various entities within a JSON array through the use of radio buttons

I am currently developing a website to showcase sports teams' schedules. Each team has its own JSON file containing relevant information that I aim to display upon selecting the team from a radio button. For instance, let's consider the example ...

Using AJAX to dynamically load content from a Wordpress website

Currently, I have been experimenting with an AJAX tutorial in an attempt to dynamically load my WordPress post content onto the homepage of my website without triggering a full page reload. However, for some reason, when clicking on the links, instead of ...

"Change opacity smoothly with the FadeToggle feature for a

I have a question that might seem silly, but I can't quite figure it out. How can I extend the duration of the fade effect? window.switchIn = function() { $('.red').fadeToggle(function(){ $('.blue').fadeToggle(function() { ...

Creating a resizable SVG rectangle element with React

Hey, I'm a beginner in Svg and currently learning ReactJs. I have a question that I'm not sure is possible or not. I have an Svg element with its children wrapped inside a g. The g element contains a rect element that I want to make resizable usi ...

Methods for decoding a JSON object and iterating through its contents

After learning how to encode an object on the server side from this post, I am now interested in decoding it on the client side. Following is what I do on the client side: $.ajax({ type: "GET", url: "/cgi-bin/ajax_sort.pl", contentType: "appl ...

Creating an interactive dropdown menu with simple_form

I am new to JS/Ajax and unsure how to render dynamic options based on previously inserted data in the same form. Background: The bike shop chain application allows the renting of bikes with names like "bike 1" or "yellow bike" ('bikes'), by sele ...

The onload event for embedding SVG files is not functioning as expected

I created an angular directive: <div> <embed ng-src="{{url}}" id="map" type="image/svg+xml/> </div> I am trying to trigger a function when the svg is fully loaded. To achieve this, I have added an onload action listener durin ...

Counting the number of times a form is submitted using a submit button and storing the data

After researching for a few hours, I've gathered information on different techniques for storing data related to a submit button counter in a text file. <form action="/enquiry.php" method="post" name="form"> <label>Name *</label> &l ...

The Promise.all function encountered an error: Uncaught TypeError: #<Promise> is not an iterable object

Currently, I am dealing with the challenge of hitting two APIs and waiting for both responses to return before dispatching my action. Although I am utilizing Promise.all, I am encountering the following error: index.js:51 Uncaught (in promise) TypeErro ...

Ajax request results in a 400 error code

Here is the structure of my Ajax call: function Submit() { var objectData = { email: $("#email").val(), firstName: $("#firstName").val(), lastName: $("#lastName").val(), loginMode: $("#login ...

What methods work best for handling extensive arrays in Javascript language?

I am currently working on a React JS application that interacts with an API to fetch a JSON object containing a large array of over 10,000 objects. This array is then used to populate a table with the help of various filters and options available through c ...

What is causing the malfunction of the Bootstrap 4 Toggle button?

I have integrated Laravel 5.8 and Bootstrap 4 into my project using npm, and I have the toggle button in my blade file as shown below: <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button> <button cl ...

Switching database connections based on routes in express.js using sequelize

Can the database connection in sequelize be modified based on the route? For instance, Users can access 2 different installations on a website: - example.com/foo - example.com/bar When users log in, they are directed to example.com/foo. To view all th ...

Splitting a string in Typescript based on regex group that identifies digits from the end

Looking to separate a string in a specific format - text = "a bunch of words 22 minutes ago some additional text". Only interested in the portion before the digits, like "a bunch of words". The string may contain 'minute', & ...