Как выполнить несколько генераторов на основе действий, отправляемых асинхронно

Question

Я пытаюсь отправить несколько действий, которые будут запускать несколько функций генератора.

OnClick

dispatch({ type: "ACTION_1", data1});
dispatch({ type: "ACTION_2", data2});

saga. js

function* method1(action){

//...

const response = yield call(api, requestParams);

//...

}

function* method2(action){

//...

const response1 = yield call(api, requestParams1);

//...

//dependent on response1
const response2 = yield call(api, requestParams2);

//...

//dependent on response2
const response3 = yield call(api, requestParams3);

//...
}


function* actionWatcher() {
    yield all([
        takeLatest("ACTION_1", method1),
        takeLatest("ACTION_2", method2),
    ]);
}
export default function* sagas() {
    yield all([actionWatcher()]);
}

OnClick, метод1 вызывается, и я вижу сетевой вызов, и на консоли есть эта ошибка Error: Generator is already running.

Я также пытался takeEvery в actionWatcher() метод, та же ошибка.

Как мне этого добиться?

Answer 1

В соответствии с требованием мы можем создавать саги, как здесь Требуется method1Saga и method2Saga, поэтому я приведу один пример того, как работает сага

//worker : work for our saga 
function* method1(action) {
    // api call : if we have many dependent api calls then we can simply add
    //one more response2 below response1 and we can use response1 in response2 as well because yield wait until we get our response from server 

    const response1 = yield call(api, requestParams); // api call which return type and payload 

    const response2 = ...... 

    yield put(pass_final_response_here); // pass_final_response_here like ( { type : '' , payload : 'your_response' } )
}

//watcher : watch for request 
function* method1Saga() {
yield takeLatest("ACTION_1",method1)
}

// вы можете создать свой method2Saga как в примере выше

function* actionWatcher() {
    yield all([
        method1Saga(),
       //pass your all saga here  
      ]);
}

Наконец, импортируйте actionWatcher.where, где мы настраиваем наш магазин, а затем просто запускаем нашу сагу. как

/**
 *  Store Configuration 
 */

 import  { createStore , applyMiddleware } from 'redux';

 import rootReducer from 'your_root_reducer_path';

 //middleware
 import reduxSaga from 'redux-saga';

 //actionWatcherPath
 import actionWatcherPath from 'actionWatcherPath'; // 

 const sagaMiddleware = reduxSaga();

 //store
 const store = createStore(rootReducer,applyMiddleware(sagaMiddleware));

 //run : our actionWatcherPath
 sagaMiddleware.run(actionWatcherPath);

 export default store;