2022-05-26
2788
#redux
Joseph Mawa
113587
May 26, 2022 â‹… 9 min read

Redux Toolkit’s new listener middleware vs. Redux-Saga

Joseph Mawa A very passionate open source contributor and technical writer

Recent posts:

Using Defer In Angular 17 To Implement Lazy Loading

Using defer in Angular 17 to implement lazy loading

Angular’s new `defer` feature, introduced in Angular 17, can help us optimize the delivery of our apps to end users.

Lewis Cianci
Dec 4, 2023 â‹… 10 min read

Using ElectricSQL to build a local-first application

ElectricSQL is a cool piece of software with immense potential. It gives developers the ability to build a true local-first application.

Rahul Padalkar
Dec 1, 2023 â‹… 11 min read
Using Rust And Leptos To Build Beautiful Declarative User Interfaces

Using Rust and Leptos to build beautiful, declarative UIs

Leptos is an amazing Rust web frontend framework that makes it easier to build scalable, performant apps with beautiful, declarative UIs.

Eze Sunday
Nov 30, 2023 â‹… 10 min read
5 Best JavaScript Multi-Dimensional Array Libraries

5 best JavaScript multidimensional array libraries

Learn more about the 5 best JavaScript libraries for dealing with multidimensional arrays, such as ndarray, math.js, and NumJs.

Pascal Akunne
Nov 30, 2023 â‹… 4 min read
View all posts

2 Replies to "Redux Toolkit’s new listener middleware vs. Redux-Saga"

  1. Hiya, I’m a Redux maintainer and the person who drove development of the listener middleware. Very nice post!

    A few quick thoughts:

    I actually covered our current recommendations for which Redux middleware to use when in my recent Reactathon talk “The Evolution of Redux Async Logic”: https://blog.isquaredsoftware.com/2022/05/presentations-evolution-redux-async-logic/ .

    As a TL;DW: use RTK Query for data fetching; thunks for logic that just needs to talk to the store; and listeners if your code needs to react to actions or state changes. Only reach for sagas as a last resort if no other tool works.

    Per the bundle sizes table – this is a bit confusing and misleading, because it’s comparing two specific APIs vs the entire RTK library. In addition, that “12.7K min+gz for all of RTK” _also_ includes the size of Immer, Reselect, and the Redux core.

    Also, RTK _does_ tree-shake. If I just use `configureStore` and `createSlice`, you won’t pay the cost of including `createAsyncThunk`, `createEntityAdapter`, or `createListenerMiddleware`. So, yes, the _entire_ lib is 12.7K min+gz including dependencies, but most apps aren’t using every single API in RTK.

    I’m actually very curious where you got the “6.6K min” size for the listener middleware. With how Bundlephobia works, and because we ship our package as a single file per module build artifact, that isn’t broken out separately. When the middleware was still a standalone package for alpha testing, it looked like the “modern” bundle file for that build was coming in right at 4K min

    I just did some hand-inspection of the `cjs.production.min` and `esm.modern.min` build artifacts in our published package, and pulled out _just_ the listener middleware code. Looks like the “ESM modern” code is only 3.8K min, and the “CJS compat” code is 5.1K min. Running each of those through GZIP, I get 1.7K min+gz for “modern”, and 2K min+gz for “CJS compat”. So, the table isn’t too far off, but actual code included in the bundle _should_ be a bit better than what’s listed 🙂

    I appreciate you taking the time to write this article, and put together the comparisons. Glad to hear that you’ve found the listener middleware “easy to learn”!

  2. Hi @Acemarke, Joseph here. Thanks for reading and taking time to provide feedback. I do agree Bundlephobia’s estimates are far from precise. I will update the article and highlight it in the corresponding section. And include the other points you raised. I believe readers will find them useful as well.

    Thanks once again for your time.

Leave a Reply