Working with Middleware in Redux

Suppose the to-do list must load from a server when the app starts. The reducer cannot do it, because a reducer must be pure and a network request is a side effect. Each component could fetch in its own useEffect and dispatch the result, but then every screen that loads data repeats the same request, loading and error code in its own way. Redux has a separate place for such work, between the moment an action is dispatched and the moment it reaches the reducer.

A function that runs at that point is called middleware. Every dispatched action passes through it