React Native, Redux - Как выполнить асинхронное действие c после успешного выполнения другого асинхронного действия c

Question

В собственном приложении реагирования мне нужно обновить элемент списка, выполнив действие asyn c, и после успешного выполнения определенного действия update asyn c мне нужно перезагрузить элемент списка соответственно с изменениями выше действие по обновлению. Здесь я перезагружаю список, выполняя действие asyn c. Я хотел бы знать, как выполнить два асинхронных c действия (A и B) последовательно после успешного выполнения первого (A), а затем второго (B)

Я реализовал реагирующий нативный приложение с редуксом. В основном это общение с API с помощью веб-сервисов. Я использовал Fetch API для реализации асинхронных вызовов c и использовал пользовательское промежуточное ПО Http для обработки асин c вызовов в качестве распространенного метода (я не использовал thunk)

Пользовательское промежуточное ПО выглядит следующим образом

    export const commonHttpAction = (action) => {
    const commonHttpActionTemplate = {
        type: '',
        urlParam: null,
        httpMethod: action.requestMethod == undefined ? 'GET' : action.requestMethod,
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + accessToken
        },
        body: action.requestBody == undefined ? undefined : action.requestBody,
        payload: null
    };

    return {
        HTTP_ACTION: Object.assign({}, commonHttpActionTemplate, action)
    };
};

    const httpMiddleware = store => next => action => {
    if(action[HTTP_ACTION]) {
        const actionInfo = action[HTTP_ACTION];
        const fetchOptions = {
            method: actionInfo.httpMethod,
            headers: actionInfo.headers,
            body: actionInfo.body || actionInfo.requestBody || actionInfo.payload || null
        };

        next({
           type: actionInfo.type + "_REQUEST"
        });

        fetch(getHostUrl() + '/' + actionInfo.urlParam, fetchOptions)
            .then(response => response.json())
            .then(responseJson => next({
                type: actionInfo.type + "_SUCCESS",
                payload: responseJson
            }))
            .catch(error => next({
                type: actionInfo.type + "_FAILURE",
                payload: error
            }));
    } else {
        return next(action);
    }
}

export default httpMiddleware;

Затем я отправил действия asyn c через функции mapDispatchToProps и connect () в компонентах / экранах реагирующих на него компонентов, используя вышеуказанное пользовательское промежуточное ПО.

Тогда редукторы будут обрабатывать ответ в соответствии с типами действий.

Например:

    ACTION_TYPE_REQUEST, ACTION_TYPE_SUCCESS and ACTION_TYPE_FAILURE

Затем в компонентах / экранах я использовал функцию "mapStateToProps", чтобы использовать paylod from redurs

Как описано выше, я извлек данные на свои экраны и представьте, что я создал Flatlist, отправив асинхронное действие c для загрузки данных в список, и я обновлю один из элементов списка путем отправки другого асинхронного действия c. Мне нужно повторно обработать плоский список после успешного завершения действия asyn c. До сих пор я пытался использовать функцию обратного вызова. но с моей реализацией, асинхронное c действие загрузки списка не отправляется (просто Flatlist не перезагружается после обновления одного из элементов списка).

Я написал обратный вызов, как показано ниже

class ExampleComponent extends Component {
    componentDidMount() {
       this.props.listDataLoadingAction()
    }
    render() {
       return(
         <View>
            <Flatlist
              renderItem={(item) => 
                <View>
                  <TouchableOpacity onPress={() => {this.updateAction, 
                    ()=> this.props.listDataLoadingAction()}}>
                  </TouchableOpacity>
                </View>
              }
            />
         </View>
       );
    }

    updateActon =(callback) => {
      this.props.updateListRecordAction();
      callback();
    }

}

const mapStateToProps = state => {
  return{
    //get the reducer data
  }
}

const mapDispatchToProps = dispatch => {
  return {
   istDataLoadingAction: () => dispatch(istDataLoadingAction()),
   updateListRecordAction: () => dispatch(updateListRecordAction())
  }
}

export default connect(mapstateToProps, mapDispatchToProps)(ExampleComponent)

Будет очень признательно, если кто-нибудь сможет найти решение

Answer 1

Было бы очень полезно, если бы у вас был фрагмент кода того, что вы пытаетесь сделать.

В общем, вы можете использовать async / await

async function () {
  await firstAction();
  await secondAction();
}

Если первое действие не влияет на второе, тогда я отправлю и жду как

async function () {
  await Promise.all([
    firstAction(),
    secondAction(),
  ]);
}