saga can't dispatch another saga

[Mezhinsky Dmitry]

Next-redux-wrapper can't dispatch second saga from first saga. I have two actions: loadEvent(slug) and loadCategory(id) actions, for each of this actions i have sagas: loadEventSaga and loadCategorySaga. I dispatch action from page /pages/events/[slug].tsx using getServerSideProps and i got successfully loaded event item to store, but in events saga i wanna dispatch another action (loadCategory) with leads to another saga, which loads category from server and put it on the store. So thats didn't work. I try to do the same operations on client and it works, so i think the problem on next-redux-wrapper. Maybe this wrapper has some restrictions?

/pages/events/[slug].tsx

export const getServerSideProps: any = wrapper.getServerSideProps((store): any => async ({ query, req, res }: any) => {
	let { slug } = query;
	if (!req) {
		store.dispatch(loadEvent(String(slug)));
		return {};
	}
	await store.dispatch(loadEvent(String(slug)));
	store.dispatch(END);
	await store.sagaTask!.toPromise();
	return {};
});


function mapDispatchToProps(dispatch: any) {
	return {};
}

const mapStateToProps = createStructuredSelector({
	item: makeSelectEventsItem(),
});

export default connect(mapStateToProps, mapDispatchToProps)(Event);

events.saga.tsx

import { all, call, put, takeLatest } from 'redux-saga/effects';
import axios, { AxiosResponse } from 'axios';
import { loadEventOK, LoadEventERR } from '../actions/events.actions';
import { eventsActionTypes } from '../actions/events.actions.interfaces';
import { loadCategory } from '../actions/categories.actions';


function* loadEventSaga(props :any) {
	try {
		const { status, data }: AxiosResponse<any> = yield call(
			axios.get,
			`https://${process.env.NEXT_PUBLIC_API_URL}/api/v1/event/${props.slug}`,
			{
				params: {
					// offset,
					// limit,
				},
			},
		);

		if (status === 200) {
			const category_path = data.category.split(`/`);
			const id = category_path[category_path.length-2];
			yield put(loadEventOK(data));
			yield put(loadCategory(id));

		}
	} catch (err: any) {
		let er = new Error(err);
		yield put(LoadEventERR({}));
	}
}

function* eventsSaga(): Generator<any> {
	yield all([
		takeLatest(eventsActionTypes.LOAD_EVENT, loadEventSaga),
	]);
	
}

export default eventsSaga;

categories.saga.tsx

import { all, call, put, takeLatest } from 'redux-saga/effects';
import axios, { AxiosResponse } from 'axios';
import { loadCategoryOK, LoadCategoryERR } from '../actions/categories.actions';
import { categoriesActionTypes } from '../actions/categories.actions.interfaces';


function* loadCategorySaga(props :any) {
	try {
		const { status, data }: AxiosResponse<any[]> = yield call(
			axios.get,
			`https://${process.env.NEXT_PUBLIC_API_URL}/api/v1/category/${props.id}`,
			{
				params: {
					// offset,
					// limit,
				},
			},
		);

		if (status === 200) {
			yield put(loadCategoryOK(data));
		}
	} catch (err: any) {
		let er = new Error(err);
		yield put(LoadCategoryERR({}));
	}
}

function* categoriesSaga(): Generator<any> {
	yield all([
		takeLatest(categoriesActionTypes.LOAD_CATEGORY, loadCategorySaga),
	]);
	
}

export default categoriesSaga;

[tannguyenthanhreiq]

i also faced this problem, does anyone has solution for this issue

[tannguyenthanhreiq]

i already fixed it by adding this code to the last saga that I'm calling. In this case, "handleSetLectures" is my last Saga that handles the last action dispatched in the previous saga.