Stop fetching data inside of Redux actions

Current Situation

We often get confused about fetching data and how to connect our frontend application with the backend and we always end up reading tonnes of articles. While fetching data from API we prefer Redux actions to fetch data followed by dispatching the Redux actions to update the store. Well, this logic is not totally wrong but it has the following consequences:

1. Fetching of data updates/rerender the whole application irrespective of the fact that data is concerned to that particular component or not.
2. Less control for user feedbacks activity, you are restricted to give the user a better response from the API. For example showing loader, errors etc.
3. Actions inside Redux become more complex and difficult to read.

Alternate solution

The main logic behind redux is that we will have a store where all the common values shared among components will be stored and actions that will help to dispatch any data to update the store using reducers. Our main agenda should be to keep it as simple as the definition.

Solution Steps

1. Add all API fetching methods separately.
2. Create separate actions for updating the store.
3. Name every action accordingly for better understanding.
4. Call the fetching method inside components and update the Redux store via action after the API response.

In this approach, we can give the user a better view of response from API, Most important is user experience, for example, loader, errors, internet connectivity or server is under maintenance this kind of issues are very often and certain to occur in application and not providing better transparency to the user regarding the issues will end up creating the bad user experience.

#redux #react #software-development #programming #api