Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 One of the most complicated tasks in building front-end applications is dealing with external requests. Difficulties come from two sides.

2 On the one hand, asynchrony itself generates ambiguities, so the standard mechanisms stop working. Redux doesn't know how to work asynchronously, so all the processing of requests takes place outside Redux. In this case, any non-trivial logic for processing asynchronous actions will appear inside React components:

3 On the other hand, the network is an unreliable thing. Requests can take a long time or fail, so we should monitor them to ensure we get the correct response. If the request takes a long time, we show a spinner. If the request is interrupted, we display the corresponding warning:

4 We write a lot of similar code, even for a few calls. In real applications, the number of calls could be dozens or hundreds. Therefore, you can't do without a ready-made solution. To automate HTTP requests, we need two mechanisms:

5 <ul><li>Theredux-thunkmiddleware, already included in Redux Toolkit</li>

6 <li>The createAsyncThunk() mechanism</li>

7 </ul>Theredux-thunkmiddleware allows asynchronous code within dispatch(). That way, we can bring the logic of queries and storage updates into separate functions calledthunks:

8 You can do roughly the same thing withoutredux-thunkjust by writing an asynchronous function to which we pass dispatch() as input. The difference shows up in the more advanced use cases. For example, when we work with state or global objects, such as a WebSocket connection. In this case, you have to useredux-thunk, which makes this all much easier to do:

9 Despite the convenience gained, thunks do not reduce the amount of code, and the same error handling will make up a large part of the code. This is where createAsyncThunk():

10 Each thunk created with createAsyncThunk() contains three reducers:pending,fulfilled, andrejected. They correspond to promise states and are called by Redux Toolkit the moment the promise enters one of these states. We don't have to respond to all, so we can choose what is important to us in the application.