How to use the @talend/react-cmf.sagas function in @talend/react-cmf

export function* fetchProducts(action) {
	const { url } = action.payload;

	yield put(Connected.setStateAction({ productsFetchState: Constants.FETCHING_PRODUCTS }));

	const { response, data } = yield call(cmf.sagas.http.get, url);

	if (response.ok) {
		// Success, update collection
		yield put(Connected.setStateAction({ productsFetchState: Constants.FETCH_PRODUCTS_SUCCESS }));
		yield put(cmf.actions.collections.addOrReplace(Constants.COLLECTION_ID, data));
	} else {
		// Loading products failed
		yield put(Connected.setStateAction({ productsFetchState: Constants.FETCH_PRODUCTS_ERROR }));
	}
}

function* onFormSubmit(componentId, submitURL, action) {
	if (action.componentId !== componentId || !submitURL) {
		return;
	}
	const { response, data } = yield call(cmf.sagas.http.post, submitURL, action.properties);
	if (!response.ok) {
		return;
	}
	yield put({
		type: Component.ON_SUBMIT_SUCCEED,
		data,
		componentId,
	});
}

setupTrigger(props) {
		const config = cmf.sagas.http.getDefaultConfig() || {};
		this.trigger = kit.createTriggers({
			url: props.triggerURL,
			customRegistry: props.customTriggers,
			headers: config.headers,
			lang: props.lang,
			security: {
				CSRFTokenCookieKey: props.CSRFTokenCookieKey,
				CSRFTokenHeaderKey: props.CSRFTokenHeaderKey,
			},
		});
	}

}

function* sagaPhotoGet3() {
	const answer = yield call(sagas.http.get, 'https://jsonplaceholder.typicode.com/photos/');
	yield put(actions.collections.addOrReplace('photos3', answer.data));
}

function sortByLength(sortBy) {
	return function sort(a, b) {
		return a.get(sortBy).length - b.get(sortBy).length;
	};
}

api.registry.addToRegistry('_list_sort:sortByLength', sortByLength);

api.sagas.register('saga:get:photos3', sagaPhotoGet3);
api.actionCreator.register('http:get:photos1', httpPhotosGet1);
api.actionCreator.register('http:get:photos2', httpPhotosGet2);
api.actionCreator.register('object:view', objectView);
api.actionCreator.register('cancel:hide:dialog', hideDialog);
api.actionCreator.register('confirm:dialog', confirmDialog);
api.actionCreator.register('item1:action', chooseItem1);
api.actionCreator.register('item2:action', chooseItem2);

api.actionCreator.register(
	'subheaderbar:display-sharing',
	actionsCreatorsSubHeader.sharingSubHeader,
);
api.actionCreator.register(
	'subheaderbar:display-bubbles',
	actionsCreatorsSubHeader.bubblesSubHeader,
);

function* initSagaMiddleWare() {
	yield all([fork(api.sagas.component.handle)]);
}

api.registry.addToRegistry(
		'SEARCH_CATEGORIES_BY_PROVIDER',
		constants.search.SEARCH_CATEGORIES_BY_PROVIDER,
	);

	const routerSagas = {
		...dataset.datasetSagas.datasetRoutesSagas,
	};
	const additionalRouterSagas = additionalConfiguration.routerSagas;
	if (additionalRouterSagas) {
		Object.assign(routerSagas, additionalRouterSagas);
	}

	const rootSagas = [
		fork(sagaRouter, browserHistory, routerSagas),
		fork(api.sagas.component.handle),
		fork(dataset.datasetSagas.datasetMainSaga),
		fork(cmfSagas.changeDocumentTitle),
	];
	const rootSagasToStart = {
		...sagas.help,
		...sagas.http,
		...sagas.search,
		...sagas.preparation,
		...sagas.folder,
		...sagas.redirect,
		...sagas.notification,
	};
	const additionalRootSagas = additionalConfiguration.rootSagas;
	if (additionalRootSagas) {
		Object.assign(rootSagasToStart, additionalRootSagas);
	}

function* fecthDefinition({ definitionURL, componentId }) {
	const { data, response } = yield call(cmf.sagas.http.get, definitionURL);
	if (!response.ok) {
		return;
	}
	yield put(Component.setStateAction(data, componentId));
}

			step[ACTION_CREATORS].map(actionCreator => api.sagas.putActionCreator(actionCreator)),
		);

'SEARCH_CATEGORIES_BY_PROVIDER',
		constants.search.SEARCH_CATEGORIES_BY_PROVIDER,
	);
	api.registry.addToRegistry('preparations:sort', preparationService.sort);

	const routerSagas = {
		...dataset.datasetSagas.datasetRoutesSagas,
	};
	const additionalRouterSagas = additionalConfiguration.routerSagas;
	if (additionalRouterSagas) {
		Object.assign(routerSagas, additionalRouterSagas);
	}

	const rootSagas = [
		fork(sagaRouter, browserHistory, routerSagas),
		fork(api.sagas.component.handle),
		fork(dataset.datasetSagas.datasetMainSaga),
		fork(cmfSagas.changeDocumentTitle),
	];
	const rootSagasToStart = {
		...sagas.help,
		...sagas.http,
		...sagas.search,
		...sagas.preparation,
		...sagas.folder,
		...sagas.redirect,
		...sagas.notification,
	};
	const additionalRootSagas = additionalConfiguration.rootSagas;
	if (additionalRootSagas) {
		Object.assign(rootSagasToStart, additionalRootSagas);
	}

) {
	const action = yield take(deleteResourceConst.DIALOG_BOX_DELETE_RESOURCE_OK);
	const safeURI = get(action, 'data.model.uri', uri);
	const safeType = get(action, 'data.model.resourceType', resourceType);
	const safeId = get(action, 'data.model.id', itemId);
	const safePath = get(action, 'data.model.resourcePath', resourcePath);
	const resourceCollectionId = get(action, 'data.model.collectionId', collectionId);
	const resourceLocator = getResourceLocator(resourceCollectionId || safeType, safePath);
	const resource = yield select(cmf.selectors.collections.findListItem, resourceLocator, safeId);
	const safeResourceUri = get(
		action,
		'data.model.resourceUri',
		resourceUri || `${safeURI}/${safeType}/${safeId}`,
	);
	if (resource && safeResourceUri) {
		const result = yield call(cmf.sagas.http.delete, safeResourceUri);
		if (result.response.ok) {
			yield put({
				type: deleteResourceConst.DIALOG_BOX_DELETE_RESOURCE_SUCCESS,
				model: {
					...get(action, 'data.model', {}),
					id: safeId,
					labelResource: resource.get('label') || resource.get('name', ''),
				},
			});
		} else {
			yield put({
				type: deleteResourceConst.DIALOG_BOX_DELETE_RESOURCE_ERROR,
				error: result.data,
			});
		}
		yield call(redirect, get(action, 'data.model.redirectUrl'));