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. Stop fetching data in Redux actions. By Shrey Vijayvargiya.
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:
- Fetching of data updates/re-renders the whole application irrespective of the fact that data is concerned to that particular component or not
- 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
- Actions inside Redux become more complex and difficult to read
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.
- Add all API fetching methods separately
- Create separate actions for updating the store
- Name every action accordingly for better understanding
- 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. Good read!
[Read More]