How to use the @reduxjs/toolkit.createAction function in @reduxjs/toolkit

export const initialState: DataSourcesState = {
  dataSources: [],
  plugins: [],
  categories: [],
  dataSource: {} as DataSourceSettings,
  layoutMode: LayoutModes.List,
  searchQuery: '',
  dataSourcesCount: 0,
  dataSourceTypeSearchQuery: '',
  hasFetched: false,
  isLoadingDataSources: false,
  dataSourceMeta: {} as DataSourcePluginMeta,
};

export const dataSourceLoaded = createAction('dataSources/dataSourceLoaded');
export const dataSourcesLoaded = createAction('dataSources/dataSourcesLoaded');
export const dataSourceMetaLoaded = createAction('dataSources/dataSourceMetaLoaded');
export const dataSourcePluginsLoad = createAction('dataSources/dataSourcePluginsLoad');
export const dataSourcePluginsLoaded = createAction(
  'dataSources/dataSourcePluginsLoaded'
);
export const setDataSourcesSearchQuery = createAction('dataSources/setDataSourcesSearchQuery');
export const setDataSourcesLayoutMode = createAction('dataSources/setDataSourcesLayoutMode');
export const setDataSourceTypeSearchQuery = createAction('dataSources/setDataSourceTypeSearchQuery');
export const setDataSourceName = createAction('dataSources/setDataSourceName');
export const setIsDefault = createAction('dataSources/setIsDefault');

// Redux Toolkit uses ImmerJs as part of their solution to ensure that state objects are not mutated.
// ImmerJs has an autoFreeze option that freezes objects from change which means this reducer can't be migrated to createSlice
// because the state would become frozen and during run time we would get errors because Angular would try to mutate
// the frozen state.

hasFetched: false,
  isLoadingDataSources: false,
  dataSourceMeta: {} as DataSourcePluginMeta,
};

export const dataSourceLoaded = createAction('dataSources/dataSourceLoaded');
export const dataSourcesLoaded = createAction('dataSources/dataSourcesLoaded');
export const dataSourceMetaLoaded = createAction('dataSources/dataSourceMetaLoaded');
export const dataSourcePluginsLoad = createAction('dataSources/dataSourcePluginsLoad');
export const dataSourcePluginsLoaded = createAction(
  'dataSources/dataSourcePluginsLoaded'
);
export const setDataSourcesSearchQuery = createAction('dataSources/setDataSourcesSearchQuery');
export const setDataSourcesLayoutMode = createAction('dataSources/setDataSourcesLayoutMode');
export const setDataSourceTypeSearchQuery = createAction('dataSources/setDataSourceTypeSearchQuery');
export const setDataSourceName = createAction('dataSources/setDataSourceName');
export const setIsDefault = createAction('dataSources/setIsDefault');

// Redux Toolkit uses ImmerJs as part of their solution to ensure that state objects are not mutated.
// ImmerJs has an autoFreeze option that freezes objects from change which means this reducer can't be migrated to createSlice
// because the state would become frozen and during run time we would get errors because Angular would try to mutate
// the frozen state.
// https://github.com/reduxjs/redux-toolkit/issues/242
export const dataSourcesReducer = (state: DataSourcesState = initialState, action: AnyAction): DataSourcesState => {
  if (dataSourcesLoaded.match(action)) {
    return {
      ...state,
      hasFetched: true,
      dataSources: action.payload,
      dataSourcesCount: action.payload.length,
    };
  }

* @param modification Action object with a type, e.g., ADD_FILTER
 * @param index Optional query row index. If omitted, the modification is applied to all query rows.
 * @param modifier Function that executes the modification, typically `datasourceInstance.modifyQueries`.
 */
export const modifyQueriesAction = createAction('explore/modifyQueries');

export const queryStreamUpdatedAction = createAction('explore/queryStreamUpdated');

export const queryStoreSubscriptionAction = createAction(
  'explore/queryStoreSubscription'
);

/**
 * Remove query row of the given index, as well as associated query results.
 */
export const removeQueryRowAction = createAction('explore/removeQueryRow');

/**
 * Start a scan for more results using the given scanner.
 * @param exploreId Explore area
 * @param scanner Function that a) returns a new time range and b) triggers a query run for the new range
 */
export const scanStartAction = createAction('explore/scanStart');

/**
 * Stop any scanning for more results.
 */
export const scanStopAction = createAction('explore/scanStop');

/**
 * Reset queries to the given queries. Any modifications will be discarded.
 * Use this action for clicks on query examples. Triggers a query run.

function toUpdateItem(item: DashboardAcl): DashboardAclUpdateDTO {
  return {
    userId: item.userId,
    teamId: item.teamId,
    role: item.role,
    permission: item.permission,
  };
}

interface SetDashboardQueriesToUpdatePayload {
  panelId: number;
  queries: DataQuery[];
}

export const clearDashboardQueriesToUpdate = createAction('dashboard/clearDashboardQueriesToUpdate');
export const setDashboardQueriesToUpdate = createAction(
  'dashboard/setDashboardQueriesToUpdate'
);
export const setDashboardQueriesToUpdateOnLoad = (panelId: number, queries: DataQuery[]): ThunkResult => {
  return async dispatch => {
    await dispatch(setDashboardQueriesToUpdate({ panelId, queries }));
  };
};

export function updateDashboardPermission(
  dashboardId: number,
  itemToUpdate: DashboardAcl,
  level: PermissionLevel
): ThunkResult {
  return async (dispatch, getStore) => {
    const { dashboard } = getStore();
    const itemsToUpdate = [];

export const initialDataSourceSettingsState: DataSourceSettingsState = {
  testingStatus: {
    status: null,
    message: null,
  },
  loadError: null,
  plugin: null,
};

export const initDataSourceSettingsSucceeded = createAction(
  'dataSourceSettings/initDataSourceSettingsSucceeded'
);

export const initDataSourceSettingsFailed = createAction('dataSourceSettings/initDataSourceSettingsFailed');

export const testDataSourceStarting = createAction('dataSourceSettings/testDataSourceStarting');

export const testDataSourceSucceeded = createAction<{
  status: string;
  message: string;
}>('dataSourceSettings/testDataSourceSucceeded');

export const testDataSourceFailed = createAction<{ message: string }>('dataSourceSettings/testDataSourceFailed');

export const dataSourceSettingsReducer = (
  state: DataSourceSettingsState = initialDataSourceSettingsState,
  action: AnyAction
): DataSourceSettingsState => {
  if (initDataSourceSettingsSucceeded.match(action)) {
    return { ...state, plugin: action.payload, loadError: null };
  }

* Reset queries to the given queries. Any modifications will be discarded.
 * Use this action for clicks on query examples. Triggers a query run.
 */
export const setQueriesAction = createAction('explore/setQueries');

/**
 * Close the split view and save URL state.
 */
export const splitCloseAction = createAction('explore/splitClose');

/**
 * Open the split view and copy the left state to be the right state.
 * The right state is automatically initialized.
 * The copy keeps all query modifications but wipes the query results.
 */
export const splitOpenAction = createAction('explore/splitOpen');

export const syncTimesAction = createAction('explore/syncTimes');
/**
 * Update state of Explores UI elements (panels visiblity and deduplication  strategy)
 */
export const updateUIStateAction = createAction('explore/updateUIState');

/**
 * Expand/collapse the table result viewer. When collapsed, table queries won't be run.
 */
export const toggleTableAction = createAction('explore/toggleTable');

/**
 * Expand/collapse the graph result viewer. When collapsed, graph queries won't be run.
 */
export const toggleGraphAction = createAction('explore/toggleGraph');

import { DataQuery } from '@grafana/data';

export const loadDashboardPermissions = createAction('dashboard/loadDashboardPermissions');

export const dashboardInitFetching = createAction('dashboard/dashboardInitFetching');

export const dashboardInitServices = createAction('dashboard/dashboardInitServices');

export const dashboardInitSlow = createAction('dashboard/dashboardInitSlow');

export const dashboardInitCompleted = createAction('dashboard/dashboardInitCompleted');

/*
 * Unrecoverable init failure (fetch or model creation failed)
 */
export const dashboardInitFailed = createAction('dashboard/dashboardInitFailed');

/*
 * When leaving dashboard, resets state
 * */
export const cleanUpDashboard = createAction('dashboard/cleanUpDashboard');

export function getDashboardPermissions(id: number): ThunkResult {
  return async dispatch => {
    const permissions = await getBackendSrv().get(`/api/dashboards/id/${id}/permissions`);
    dispatch(loadDashboardPermissions(permissions));
  };
}

function toUpdateItem(item: DashboardAcl): DashboardAclUpdateDTO {
  return {
    userId: item.userId,

import React, { createContext, useContext, useReducer } from 'react'
import { StepperAction, StepperContextProps, StepperState, StepperType } from './types'

import { createAction } from '@reduxjs/toolkit'

const initialState = { activeStep: 0 }

export const next = createAction(StepperType.NEXT)
export const back = createAction(StepperType.BACK)
export const jump = createAction(StepperType.JUMP)
export const reset = createAction(StepperType.RESET)

const reducer = (state: StepperState, action: StepperAction): StepperState => {
  switch (action.type) {
    case StepperType.NEXT:
      return { ...state, activeStep: state.activeStep + 1 }
    case StepperType.BACK:
      return { ...state, activeStep: state.activeStep - 1 }
    case StepperType.JUMP:
      return { ...state, activeStep: action.payload! }
    case StepperType.RESET:
      return { ...state, activeStep: 0 }
    default:
      return state

/**
 * Stop any scanning for more results.
 */
export const scanStopAction = createAction('explore/scanStop');

/**
 * Reset queries to the given queries. Any modifications will be discarded.
 * Use this action for clicks on query examples. Triggers a query run.
 */
export const setQueriesAction = createAction('explore/setQueries');

/**
 * Close the split view and save URL state.
 */
export const splitCloseAction = createAction('explore/splitClose');

/**
 * Open the split view and copy the left state to be the right state.
 * The right state is automatically initialized.
 * The copy keeps all query modifications but wipes the query results.
 */
export const splitOpenAction = createAction('explore/splitOpen');

export const syncTimesAction = createAction('explore/syncTimes');
/**
 * Update state of Explores UI elements (panels visiblity and deduplication  strategy)
 */
export const updateUIStateAction = createAction('explore/updateUIState');

/**
 * Expand/collapse the table result viewer. When collapsed, table queries won't be run.

/**
 * Remove query row of the given index, as well as associated query results.
 */
export const removeQueryRowAction = createAction('explore/removeQueryRow');

/**
 * Start a scan for more results using the given scanner.
 * @param exploreId Explore area
 * @param scanner Function that a) returns a new time range and b) triggers a query run for the new range
 */
export const scanStartAction = createAction('explore/scanStart');

/**
 * Stop any scanning for more results.
 */
export const scanStopAction = createAction('explore/scanStop');

/**
 * Reset queries to the given queries. Any modifications will be discarded.
 * Use this action for clicks on query examples. Triggers a query run.
 */
export const setQueriesAction = createAction('explore/setQueries');

/**
 * Close the split view and save URL state.
 */
export const splitCloseAction = createAction('explore/splitClose');

/**
 * Open the split view and copy the left state to be the right state.
 * The right state is automatically initialized.
 * The copy keeps all query modifications but wipes the query results.