I was working on creating the react-redux application. But stuck on the point why we shouldn't call the async function (for API calling) in the component method like componentWillMount etc? Why I've to use the middleware like redux-thunk & saga? Why we cannot call the API request from the action and based on that result, we call the reducer? Is it the bad idea? I didn't understand deeply about this. Can you please help me out to understand the concept of API calling in redux?
As far as I see it, you can call async functions anywhere, including in componentWillMount. What a middleware like redux-thunk does, is to add IDs in the dispatched actions, 'ordering' them, avoiding race conditions such as the one that is described in Writing Async Code in redux
Related
I was using axios for api calls in class component of React. And used Redux to store mostly login details.
So started learning about Redux-thunk and now I am confused as to where to do API calls? Is doing api calls from view side not good? Do i need to use redux-thunk?
You use redux-thunk when you require async actions for your reducers.
Calling an API would be a good example of that. Doing API calls is something the view would do, anyways (e.g., otherwise you'd have them in your components, which is "view", too). The API is then doing the business logic and is only providing "view data".
Your view might also want to track the state of the async action (e.g. "list is loading...", "failed to load because xyz", "{list of users when loaded}")
You don't need to use redux-thunk, but chances are at some point you re-implemented it, anyways (I did that and then switched). I suggest you simply use #reduxjs/toolkit (They have a good documentation site)
It really eases up working with actions, thunks, async thunks and reducers in general.
I am just learning how to implement redux into my react projects and I am trying to understand the advantage of running asynchronous code in middleware for redux state changes. Why wouldn't we just run the asynchronous code at the component level and then dispatch different actions on the completion of the asynchronous code at the component level?
Sometimes depends on your situation u have to call actions at same time u need middlewars for async actions and its clearer and simpler and more sync to call your apis in your actions.instead of fetch it in your component then pass it to your action.
Search many forum but still confuse, redux is async or sync??
Realize this is a basic question but I had no luck finding the answer elsewhere.
if any one know describe with examples.
Redux store only supports synchronous data flow (ref).
This is what you get by default with createStore().
Asynchronous middleware like redux-thunk or redux-promise wraps the store's dispatch() method and allows you to dispatch something
other than actions, for example, functions or Promises. Any middleware
you use can then interpret anything you dispatch, and in turn, can
pass actions to the next middleware in the chain.
For example,
a Promise middleware can intercept Promises and dispatch a pair of
begin/end actions asynchronously in response to each Promise.
Read More>>
Dispatching actions is synchronous in Redux.
Without middleware, Redux store only supports synchronous data flow. This is what you get by default with createStore().
For asynchronous actions, you can use applyMiddleware(), for middlewares such as redux-thunk.
Building a React application with redux as the flux pattern.
To use an api a token exchange request needs to happen. This has to occur only once when the React application starts. The access_token returned from the token exchange needs to be stored in the redux state and accessible by other api calls.
One approach i tried is by calling a redux action in the App(parent) component, and then all other calls are within children components. New to React i now understand that this is not the right approach as the React components lifecycle events and the actions and reducers called do not follow a synchronous flow, so the redux actions are called asynchronously.
How do i ensure a redux action is called prior to any other redux action that depends on the results of the first redux action? Which middleware would be best suited for ensuring a synchronous approach redux-thunk, redux-look and redux-saga.
If you need a process to run before any other action, you could do it before creating the store, and passing the result in your main reducer function at store creation.
Then, just render the app after the promise or callback of this process is done.
Otherwise, just dispatch this initial action after the store creation, and before app render (with redux-thunk if it is async).
You can use redux-thunk to have a "promise like" behavior when displatching actions. This way you can ensure an action was done before dispatching another one.
I have been using React , Redux since few months now. One of the most confusing part of the ecosystem is the async data flow. There are many great solutions available and choosing the right solution for your problem is the tough part.
In my application, the action creators mostly have async axios [ajax] calls to my back-end apis. Injecting Redux-Promise as a middleware resolves the issue of async data flow.
Considering the scalable app, I might need to chain multiple axios calls in my action creator. I think I can still use Redux-Promise as a middleware and this would take care of async data flow in my app.
In general the team is more inclined towards using Redux-Thunk, which I feel more complicated syntax for this problem. I need suggestions in evaluating these 2 frameworks considering most of my action creators are making axios calls(promises) only. I have seen a great deal of discussion on Redux-thunk here. I understood how thunk can be useful. . But I need more clarification evaluating Redux-Promise and Redux-Thunk together when used for Promises only. Which middleware is better in such situation and why? What advantages do I get using Redux-Thunk over Redux-Promise ? Or there is none?
Redux Promise is convenient for dispatching three actions (request, success, failure) without writing that code manually.
Redux Thunk is convenient for async data flow when you express one action creator as waiting for another action creator. It also lets you read the current state for conditional dispatches and early bailouts.
You can use them together, or use any one in particular. I would recommend starting with Redux Thunk because it offers more control and is more versatile. After you get it working, you can consider adding Redux Promise to remove some of the boilerplate code related to dispatching three kinds of actions. If you find that it doesn’t buy you much, remove it. On the other hand, if you notice all you thunk action creators just dispatch a single promise, you can remove Redux Thunk instead.
If this is still confusing, I recommend just using Redux Thunk until you get more comfortable with how middleware works.