Member-only story
Best practices of HTTP requests using redux-thunk (Redux Toolkit + TypeScript)
Examples and explanation on HTTP CRUD requests using createAsyncThunk middleware

Problem Statement
I used to make API calls separately after getting the updated state from the Redux reducer before finding this cleaner way to do it. After doing some research on it and its alternative solutions, I decided to write down the things I have learned. I welcome any comments you may have.
Background: Redux and its usage
Redux is a library for managing global states that can be accessed and updated across the entire React application. Redux makes it easier comparing to traditional React data passing pattern which is passing data as parameters to child components. Redux helps to avoid props drilling (the data is being passed through too much layers) but it is not always the best choice to manage states in our application. In fact, I will only apply Redux on certain states that will be accessed in many layers. I will remain the rest with React useState hook and passing them into child components if they are only needed for 1 or 2 layers. Please check this articles to find out when to use Redux and when not to