Any benefits to use Redux-Saga instead of writing async func in react components?

user_13416104 0
Viewed 2244

react version is 16.13.1.

I wondering if there are some benefits to use redux-saga for async methods.

const component = () => { 
  const asyncFunc = async() => {  // <- this part should be moved out to redux-saga?
    await callMethod();
  }

  return (
    <div onClick={asyncFunc}>button</div>
  )
}

I have no idea that asyncFunc should be called in redux-saga or in react component.

Which is better or more beneficial?

In my opinion, I prefer to call async method in components.

redux-saga reactjs javascript
3 Answers

In simpler words redux-saga is beneficial in the case where we need to achieve some async operation during a redux action.

Now what you are doing is handling the side effect in the component so the action you'll dispatch will only update the store.

It is a very simple use case where you handled it in the component, consider a scenario where you need this same functionality from 2 different components.. you will have to copy the logic in 2 different components.

The testing will become difficult.

Now consider the same scenario again but the problem is since you can trigger the API calls from 2 components, let's consider a scenario that the user triggered the API call from both the components simultaneously, it is wastage of resource to handle both the API calls if the first API call is still pending.

for all this scenario redux-saga provide methods like takeLatest, takeEvery etc.

user_73180370

the benefit of using almost each and everything of redux is to organize the code and keep all the states in store, if you use async function in one component and by chance you want to use that async function again for some other component then you have to write the entire code again and again , in case of redux-saga you will write async one time and can call that action anywhere in your whole react project, for now you might be creating 5-10 components but it might be possible that in future you will create 5000 components at that time redux and its middlewares come into play .

user_118064660

Redux-saga is a middleware to act on an action before it reaches the reducer.

Basically, all side effects will be handled in the middleware and gives you more control over the effects.

This way, it has clear separation of concerns that the middleware is going to handle the side effects and not the component. A saga is not dependent on the lifetime of a component.

In a saga, fetch will look something like this:

function* fetchItems(action) {
  try {
    const result = yield call(axios.post, ...);
    yield put ({ type: 'FETCH_SUCCESS', payload: { result } });
  } catch (e) {
    yield put ({ type: 'FETCH_FAILED', error: { msg: e } });
  }
}

yield takeEvery(FETCH_ITEMS, fetchItems);

However for complex systems with background processing, you can implement different patterns that uses fork() and cancel()

function* doSync() {}

function* main() {
  while ( yield take(START_SYNC) ) {
    const task = yield fork(doSync) // returns a task
    yield take(STOP_SYNC)
    yield cancel(task) // cancel a task if syncing is stopped
  }
}

Thus, all that said, redux-saga's power lies when your system is getting more complex and event-driven.

user_80122060
Related