Data exchange between Redux application and server

This section is for advanced students who haven't stopped at what they've achieved in Redux and decided to go to the end of this tutorial. In the next two sections, we'll cover how a Redux app works with asynchronous logic, connect our app to the server side, and teach it how to exchange data with it.

From the previous sections, we know that the Redux application is based on a synchronous mechanism. The main stages of work are sending actions when some event occurs in the application, then updating the state in the store with a reducer function, notifying the application components about the state change and, accordingly, displaying the new state value in the components.

In real life, it often happens that an application also needs asynchronous logic, for example when working with HTTP API requests and receiving data from some external server. Therefore, in order for our 'synchronous' Redux store to be able to work with such asynchronous logic, the so-called middlware is used - software that acts as an intermediary or link between the store of our application and, for example, the server, which we will start working with in this chapter of the tutorial.

There are many such middlewares created for Redux, but the most widely used and officially recommended for working with Redux applications with asynchronous logic is still Redux Thunk. This software helps us to use regular functions (or thunks) that can contain asynchronous logic, such as setTimeout, Promises, async/await, to interact with our store. As for the term itself, thunk is code that does some deferred work.

Now that we have a little bit of an idea of ​​how to work with asynchronous logic in Redux, we can start implementing this step in our application. We need to make our application able to interact with some external server, receiving and sending data to it. In other words, there is an exciting and very important topic ahead. Let's get started.