Plan the timing of dispatch in the reducer

Question

Plan the timing of dispatch in the reducer

While solutions like redux thunk exist for dispatching actions asynchronously, I recently encountered a situation like the one below:

import {store} from "./store";

const initialState = {
  todos: []
}

function todoApp(state = initialState, action) {    
  
  if(action.type == "ACTION_A"){
    // 1. do something with state
    // 2. do something with state, and then... schedule a dispatch, for example using setTimeout:
    setTimeout(()=>store.dispatch({type:"ACTION_B", payload:1}), 2000);  
    return state;
  }// check other actions e.g. ACTION_B etc.

  return state;     
}

In this example, ACTION_B is not meant to be dispatched from elsewhere as an async action, but rather is a part of the logic within ACTION_A.

So, how should such situations be handled in redux?

Some recommend using middleware as a solution, however, comments from Mark Erikson (Redux maintainer) on a blog post suggest that it might not be the right approach. He seems to recommend using redux-loop in such cases.

So, what are the correct ways to deal with such situations in redux? Are there other solutions besides redux-loop? And can redux-thunk still be used to resolve this issue?

javascript redux

Answer 1

Answer №1

Here's a great scenario where a thunk would be beneficial:

const actionA = () = ({ dispatch, getState }) => {
   dispatch(actionA1) // execute another action that will alter the state

   setTimeout(()=> {
       const { data } = getState();
       dispatch({type:"ACTION_B", payload: data });
   }, 2000);
}

Alternatively, you could create a custom middleware that schedules the timeout but still allows actionA to reach the reducer and change the state synchronously:

const middleware = ({ dispatch, getState }) = next => action => {
   if(action.type == "ACTION_A"){ //
       setTimeout(()=> {
           const { data } = getState();
           dispatch({type:"ACTION_B", payload: data });
       }, 2000);
   }

   next(action);
}

It's important for reducers to be pure functions, meaning they should not have side effects such as scheduling or dispatching actions. If an action requires something beyond altering the state, it should utilize a middleware (like a thunk) instead.

Answer 2

Here's a great scenario where a thunk would be beneficial:

const actionA = () = ({ dispatch, getState }) => {
   dispatch(actionA1) // execute another action that will alter the state

   setTimeout(()=> {
       const { data } = getState();
       dispatch({type:"ACTION_B", payload: data });
   }, 2000);
}

Alternatively, you could create a custom middleware that schedules the timeout but still allows actionA to reach the reducer and change the state synchronously:

const middleware = ({ dispatch, getState }) = next => action => {
   if(action.type == "ACTION_A"){ //
       setTimeout(()=> {
           const { data } = getState();
           dispatch({type:"ACTION_B", payload: data });
       }, 2000);
   }

   next(action);
}

It's important for reducers to be pure functions, meaning they should not have side effects such as scheduling or dispatching actions. If an action requires something beyond altering the state, it should utilize a middleware (like a thunk) instead.

Plan the timing of dispatch in the reducer

Answer №1

Similar questions

Convenient ways to connect data between a database and Firebase authentication system

Migrating from jQuery to Vue: Resolving Uncaught TypeError - n.getClientRects is not a valid function

Issues with the visibility of React Bootstrap components

The functionality of the code in a stack snippet may differ from that in a standalone HTML file

Access rejected due to X-Frame-Options: "http://test.test.net/Feedback/Create?appId=TestApp" prohibits cross-origin framing in MVC5

The latest pathway fails to refresh in NextJs

Is there a viable substitute for websockets that can be utilized on shared hosting platforms?

JavaScript makes it simple to display student names based on their ID numbers

Page freezing due to JQuery scroll event

Passing data as a parameter from the view to the controller using AngularJS

Rerender not occurring after array splice with React hooks setter

Turn off and then reinstall Image when clicked

Whenever I add a new Task in React.js, the date is not visible to me

Issue with Hover Effect on Safari Browser

Creating a process to produce a random number and send it directly to an automated email

How can I transfer form data to a PHP variable using an AJAX request?

What is the best way to implement JQuery Ajax in order to invoke a PHP file on the server side, which will then execute returned javascripts?

jquery logic for iterating through all elements in a select menu encountering issues

Guide to making a reusable AJAX function in JavaScript

The v-select function organizes data based on the content of "item-text"