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

import '@talend/dataset/lib/app/index.scss';
import { browserHistory } from 'react-router';
import { routerMiddleware } from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import { all, call, fork } from 'redux-saga/effects';
import actions from './next/actions';
import components from './next/components';
import App from './next/components/App.container';
import { ALERT } from './next/constants/actions';
import { default as constants } from './next/constants';
import sagas from './next/sagas/watchers';
import locales from './next/locales';
import { registerLocales } from './i18n';
import settingsService from './next/services/settings.service';

const registerActionCreator = api.actionCreator.register;
const registerComponent = api.component.register;
const registerComponents = api.component.registerMany;
const registerExpressions = api.expression.registerMany;
const registerRouteFunction = api.route.registerFunction;

/**
 * Initialize CMF configuration
 * - Register your components in the CMF dictionary
 * - Register action creators in CMF actions dictionary
 */
export default function initialize(additionalConfiguration = {}) {
	// FIXME remove before release
	// for debug purpose
	window.registry = api.registry.getRegistry();

	// register all saga api

import { browserHistory } from 'react-router';
import { routerMiddleware } from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import { all, call, fork } from 'redux-saga/effects';
import actions from './next/actions';
import components from './next/components';
import App from './next/components/App.container';
import { ALERT } from './next/constants/actions';
import { default as constants } from './next/constants';
import sagas from './next/sagas/watchers';
import locales from './next/locales';
import { registerLocales } from './i18n';
import settingsService from './next/services/settings.service';
import preparationService from './next/services/preparation.service';

const registerActionCreator = api.actionCreator.register;
const registerComponent = api.component.register;
const registerComponents = api.component.registerMany;
const registerExpressions = api.expression.registerMany;
const registerRouteFunction = api.route.registerFunction;

/**
 * Initialize CMF configuration
 * - Register your components in the CMF dictionary
 * - Register action creators in CMF actions dictionary
 */
export default function initialize(additionalConfiguration = {}) {
	// FIXME remove before release
	// for debug purpose
	window.registry = api.registry.getRegistry();

	// register all saga api

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,
);
api.actionCreator.register('subheaderbar:submit', actionsCreatorsSubHeader.submitSubheader);

import api from '@talend/react-cmf';

import { redirect, notFound } from './actions/redirect';

const registerActionCreator = api.actionCreator.register;

function initialize() {
	registerActionCreator('redirect', redirect);
	registerActionCreator('redirect:404', notFound);
}

export default {
	initialize,
};

dispatchAndUpdateAck(actionCreator, data, requestId) {
		const action = cmf.actionCreator.get(this.context, actionCreator)({}, data, this.context);
		action.ack = deleteACK(null, { requestId });
		this.props.dispatch(action);
		this.setState(oldState => {
			if (oldState.dispatchedAck.includes(requestId)) {
				return oldState;
			}
			return { dispatchedAck: oldState.dispatchedAck.concat([requestId]) };
		});
	}

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,
);
api.actionCreator.register('subheaderbar:submit', actionsCreatorsSubHeader.submitSubheader);
api.actionCreator.register('subheaderbar:edit', actionsCreatorsSubHeader.editSubHeaderBar);

import { storiesOf } from '@storybook/react';
import withCMF from '@talend/react-storybook-cmf';
import mock from '@talend/react-cmf/lib/mock';
import { IconsProvider } from '@talend/react-components';
import api from '@talend/react-cmf';

import DataGrid from '../src/';
import register from '../src/register';
import theme from '../src/components/DataGrid/DataGrid.scss';
import { LanguageSwitcher } from './config/i18n';
import sample from './sample.json';
import sampleRenderer from './sampleRenderer.json';

Object.keys(api.expressions).forEach(id => api.expression.register(id, api.expressions[id]));

const registerActionCreator = api.actionCreator.register;
registerActionCreator('datagrid:focus-cell', (event, data) => ({
	...event,
	...data,
	type: 'DATAGRID_FOCUS_CELL',
}));

registerActionCreator('datagrid:focus-column', (event, data) => ({
	...event,
	...data,
	type: 'DATAGRID_FOCUS_COLUMN',
}));

registerActionCreator('datagrid:vertical-scroll', (event, data) => ({
	...event,
	...data,
	type: 'DATAGRID_SCROLL',