Calling an action within another one in Redux using TypeScript

Question

Suppose that I have these 2 actions (as an example) for "creating category" and "loading all categories". I need to load all categories every time I create a new category successfully, so, I need to call "loadAllCategories" action within "createCategory". I usually do that like this while using TypeScript with Redux:

// Loading all categories
export const loadAllCategories = () => async (dispatch: Dispatch) => {

    try {

        // omitted for brevity

        dispatch<ILoadAntdTreeSelectCompatibleCategoriesAction>( {
            type: TaxonomyActionTypes.LOAD_ANTD_TREESELECT_COMPATIBLE_CATEGORIES,
            payload: {
                catTreeSelectLoading: false,
                catTreeSelectRegistry
            }
        })


    } catch (error) {

        // omitted for brevity

    }
}

// Creating a category
export const createCategory = (taxonomy: ITaxonomy) => async (dispatch: Dispatch) => {
    
    try {
        await agent.Taxonomies.create(taxonomy);

        dispatch<any>(loadAllCategories());    <--- Dispatching above action within this one

        dispatch<ICreateCategoryAction>({
            type: TaxonomyActionTypes.CREATE_CATEGORY,
            payload: {
                loadingInitial: false
            },
        })

    } catch (error) {
        // omitted for brevity
    }
}

I wanted to know, using dispatch with "any" type is the only way to call another action within the current one or there is a better way of doing that?

Could I use a more specific type instead of "any"?

Needless to say without using dispatch(action), just by calling the action's name it doesn't change the state so we have to use dispatch.

What is the best practice for doing that?

Answer 1

There is a simpler way to do this when you create a category lets say you use an API for that, make that API return the value you added, in response, then add that category to category list in Redux. use the following function in the reducer.

const addToList = (oldList:any, doc:any) => {
  let newList:any = oldList;
  newList.push(doc);

  return newList;
}

and in the reducer function call it like

case TaxonomyActionTypes.CREATE_CATEGORY:
      return { ...state, categories: addToList(state.categories, action.payload) }

Edit

The Answer to your question is

dispatch<Array>

Example

interface Category {
  name: String,
}


let x:Array<Category>