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

admin管理员组

文章数量:1287956

react version is 16.13.1.

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

const ponent = () => { 
  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 ponent.

Which is better or more beneficial?

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

react version is 16.13.1.

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

const ponent = () => { 
  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 ponent.

Which is better or more beneficial?

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

• javascript
• reactjs
• redux-saga

Share Improve this question Follow edited May 22, 2020 at 2:23 Poipoi asked May 22, 2020 at 2:17 PoipoiPoipoi 22544 silver badges99 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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 ponent so the action you'll dispatch will only update the store.

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

The testing will bee difficult.

Now consider the same scenario again but the problem is since you can trigger the API calls from 2 ponents, let's consider a scenario that the user triggered the API call from both the ponents 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.

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 ponent and by chance you want to use that async function again for some other ponent 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 ponents but it might be possible that in future you will create 5000 ponents at that time redux and its middlewares e into play .

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 ponent. A saga is not dependent on the lifetime of a ponent.

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 plex 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 plex and event-driven.

本文标签： javascriptAny benefits to use ReduxSaga instead of writing async func in react componentsStack Overflow