2022-02-04
2056
#redux
Andrea Chiarelli
256
Feb 4, 2022 ⋅ 7 min read

Async actions in bare Redux with Thunk or custom middleware

Andrea Chiarelli Software developer and technical author. andreachiarelli.it

Recent posts:

Typescript or Zod for Validation?

TypeScript vs Zod: Clearing up validation confusion

Learn when to use TypeScript, Zod, or both for data validation. Avoid redundant checks and build safer, type-sound applications.

Alexander Godwin
Oct 6, 2025 ⋅ 3 min read
Wasm 3 Before GTA 6 LogRocket Article

We got Wasm 3.0 before GTA 6: Meet the web’s new engine

Discover how WebAssembly 3.0’s garbage collector, exception handling, and Memory64 transform Wasm into a true mainstream web platform.

Ikeh Akinyemi
Oct 3, 2025 ⋅ 2 min read

How to use AI to build accurate ShadCN components

AI agents often break shadcn/ui components with outdated docs or made-up props. The MCP server fixes this by giving live access to registries. In this tutorial, we’ll set it up and build a Kanban board to show it in action.

Chizaram Ken
Oct 3, 2025 ⋅ 5 min read
Rust Project for Web Services LogRocket Article

The best way to structure Rust web services

Learn how to structure Rust web services with clean architecture, Cargo workspaces, and modular crates for scalable, maintainable backends.

Jude Miracle
Oct 2, 2025 ⋅ 2 min read
View all posts

6 Replies to "Async actions in bare Redux with Thunk or custom middleware"

  1. Let’s say we have rest url to delete a resource

    / Users/Id

    How Do we dispatch action with id here as delete success won’t return any response according to REST principles.

  2. Andrea, how do we approach executing code after the async funtions have completed using redux middleware?
    Lets say we were saving a blog post using an httpAction:
    function saveQuoteAction(quote) {
    return httpAction({
    type: QUOTE,
    endpoint: “https://ron-swanson-quotes.herokuapp.com/v2/quotes”
    verb: “POST”,
    payload: quote,
    });
    }

    In my component I would import this action and then execute it:

    import { saveQuoteAction } from ‘…….’;
    const MyComponent = ({ history }) =>{

    const onSubmit = () => {
    ……
    saveQuoteAction(quote);
    // How do we wait for save quote to succeed if it is not a promise ???
    history.push(‘/’);

    }
    return ( ….
    };

  3. Hi Ralph_w, I’m afraid that there is a little misunderstanding.
    The saveQuoteAction() function doesn’t trigger the asynchronous action. It just creates a new meta action of type HTTP_ACTION.
    In order to trigger the asynchronous action, you need to dispatch it, like in the following:

    store.dispatch(saveQuoteAction());

    You should also have to implement a reducer that handles the actions related to the quote saving, similar to what you can see for getting a quote.

    In addition, you don’t wait for success or failure of the quote saving inside your component, but it is managed by the reducer. If your component correctly subscribed to the store, once the response arrives from the server, your reducer changes the state and your component will be automatically updated.

    Please, take a look at the example on CodePen (https://codepen.io/andychiare/pen/roXxpB)

  4. Hello sir i was following one of your colleague’s post

    https://blog.logrocket.com/data-fetching-in-redux-apps-a-100-correct-approach-4d26e21750fc/

    i replicated whole code in my project so that i can modify it according to needs and take it as an example

    but i am getting this error ,
    Error: Actions must be plain objects. Use custom middleware for async actions.

    and error occurs at very first line of his custom middle ware

    “` next(action); “`

    if i remove this line , there is no error and program fetches the article data but unable to set it in redux state.

    middle does not dispatches the action

  5. Solution :
    I had also faced the similar issue in the recent past. I did lot of research on it and found the solution on it. This is the very common problem with the people getting started.

    You must dispatch after async request ends.

    This program would work:

    export function bindAllComments(postAllId) {
    return function (dispatch){
    return API.fetchComments(postAllId).then(comments => {
    // dispatch
    dispatch( {
    type: BIND_COMMENTS,
    comments,
    postAllId
    })
    })
    }
    }

    OR

    Check if this works for you:

    https://kodlogs.com/34843/error-actions-must-be-plain-objects-use-custom-middleware-for-async-actions

    Hope this will help.

Leave a Reply