What's the point of redux asynchronous middleware?

Question

When I want to send a request, can't I just write it directly in the fetch function? Why do I need an extra step of middleware?

const mapDispatchToProps = ( dispatch )=>({

    fetchAndRenderArticle( articleName ){

        fetch(`http://localhost:3000/getFile?articleName=${articleName}`).then( res=> {
            return res.text();
        }).then( articleContent =>{
            dispatch({
                type:'fetchAndRenderArticle',         
                articleContent:articleContent
            });
        }).catch( err=>{
            console.log(err);
        });
    }
});

Answer 1

Asynchronous middleware is used to write asynchronous actions.

In fact, your question is more like why you need to use asynchronous Action, why are requests encapsulated into Actions?

Action manages triggering in a unified way, reducer manages receiving in a unified way, and changes status. This is just a design pattern to reduce code coupling.

So, for your question, the request needs to be encapsulated into an asynchronous Action, and the asynchronous Action relies on asynchronous middleware. This is why redux asynchronous middleware is needed.