Вызов действия внутри другого в Redux с использованием TypeScript

Предположим, что у меня есть эти 2 действия (в качестве примера) для создания категории и загрузки всех категорий. Мне нужно загружать все категории каждый раз, когда я успешно создаю новую категорию, поэтому мне нужно вызвать действие loadAllCategories в createCategory. Обычно я делаю это так, используя TypeScript с 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
    }
}

Я хотел знать, использование отправки с любым типом — это единственный способ вызвать другое действие внутри текущего или есть лучший способ сделать это?

Можно ли использовать более конкретный тип вместо любого?

Излишне говорить, что без использования dispatch(action) простой вызов имени действия не изменяет состояние, поэтому мы должны использовать диспетчеризацию.

Как лучше всего это сделать?


reactjs typescript redux dispatch thunk
person Aspian    schedule 28.11.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Существует более простой способ сделать это, когда вы создаете категорию, скажем, вы используете для этого API, заставляете этот API возвращать добавленное вами значение в ответ, а затем добавляете эту категорию в список категорий в Redux. используйте следующую функцию в редукторе.

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

  return newList;
}

и в функции редуктора назовите это как

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

Изменить

Ответ на ваш вопрос есть

dispatch<Array>

Пример

interface Category {
  name: String,
}


let x:Array<Category>
person mustafa.shykh    schedule 28.11.2020
comment
Цель вопроса — узнать, как лучше всего вызывать действие внутри другого в Redux с помощью TypeScript. Я просто хотел узнать, могу ли я использовать другой более конкретный тип вместо любого для отправки и все, хотя спасибо. - person Aspian; 28.11.2020
comment
@Aspian Извините, поэтому getAllCategories вернет список, поэтому можно использовать тип Array, чтобы сделать его более строгим по типу. - person mustafa.shykh; 28.11.2020
comment
Спасибо, но возвращаемый тип loadAllCategories — это Promise‹void›, потому что он асинхронный и использует преобразователь, поэтому он что-то отправляет и ничего не возвращает, поэтому тип — Promise‹void›. По иронии судьбы, мы не можем использовать это как тип диспетчера, потому что диспетчер реализует интерфейс Dispatch Redux, и его тип по умолчанию — AnyAction, например Dispatch‹AnyAction›, но вы не можете использовать его как этот Dispatch‹Promise‹void››, потому что Promise‹void› не удовлетворить ограничение «Действие‹любое›», в котором требуется тип свойства. Вот почему я использовал тип any для отправки. Он отлично работает, но это взлом. - person Aspian; 28.11.2020