Как обновить sh список объектов (GET) после создания асинхронного объекта (POST) с реакцией & redux-thunk

Question

Я сталкиваюсь с проблемой, как обновить sh данные с избыточным значением в моем компоненте реакции после асинхронного POST-Call . Я уже использую промежуточное программное обеспечение, которое управляет моими остальными вызовами.

Вариант использования:

1. Внутри реагирующего компонента пользователь создает новый элемент (отправляет данные асинхронно через REST- API для бэкенда).
2. Внутри того же компонента реакции у меня есть список выбора, который теперь должен также содержать новый элемент (с сгенерированным идентификатором базы данных).

Что такое Лучшая реакция + парадигма редукса для обновления сущности в бэкэнде и последующего обновления sh зависимого списка?

С уважением, Свен

Answer 1

Для асинхронных c операций, таких как выполнение вызовов Rest, вам необходимо промежуточное программное обеспечение, например thunk или saga , для отправки действий на основе асинхронного ответа c. Вот как ваше создание должно работать на высоком уровне с промежуточным программным обеспечением:

1. отправляет действие создания с полезной нагрузкой
2. промежуточное программное обеспечение вызовет остальной вызов для создания объекта
3. На основании полученного ответа промежуточное ПО отправит дальнейшие действия в хранилище, например. добавление нового элемента в список.

Answer 2

Благодаря вашим подсказкам я только что нашел ответ.

Redux (с промежуточным программным обеспечением для редукса) может обработать мой случай только из коробки. Просто объедините оба действия внутри одного «действия оболочки».

Redux будет асинхронно выполнять «действие оболочки». Но из-за моих «ожиданий» внутри «действия-оболочки» мои POST и GET-запросы будут называться синхронными в правильном порядке, и каждый из них обновляет мое хранилище при необходимости.

См .: https://github.com/reduxjs/redux-thunk

export const createEntityAndReloadEntities: ICrudPutAction<IEntityProfile> = newEntity => async dispatch => {
      return Promise.all[
    	await dispatch({
        	type: "CREATE_ENTITY",
        	payload: axios.post(apiUrl, newEntity)
      	}),
      	await dispatch({
        	type: "FETCH_ENTITY_LIST",
        	payload: axios.get<IEntityProfile>(`${apiUrl}`)
      	})];
    };