В действии Redux, вызов функции с обратными вызовами

Question

Я занимаюсь разработкой мобильного приложения, в котором используются React-Native, Redux и React-Native-Contacts.

В создателе действий я пытаюсь вызвать функцию (из React-Native-Contacts), которая имеет обратные вызовы (а не обещания).Ниже мой код.

Я хочу, чтобы действие "acContactImport" ожидало завершения вспомогательной функции "fContactImport", прежде чем перейти к оператору "dispatch".Это не ждет этого.Как я могу заставить его ждать?

// Action Creator: 
import Contacts from 'react-native-contacts';
import { PermissionsAndroid } from 'react-native'; 

export const acContactImport = (userID) => {
    return async (dispatch) => {
      let contactList = [];
      try {
          // The following statement should be executed asynchronously. 
          // However, it is not. How can I make it asynchronous? 
          contactList = await fContactImport();

          dispatch({
            type: CONTACT_IMPORT,
            payload: { contactList: contactList },

          });
      } 
      catch (err) {
        console.log("acContactImport - catch: ", err);
      }
    }; 
}; 

// Helper Function 1
export const fContactImport = async () => {
  let contactList = [];
    if (Platform.OS === "android") {
        PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_CONTACTS, {
            title: "Contacts",
            message: "This app would like to view your contacts."
        })
        .then(() => {
            contactList = _loadContacts();
        });
    } else {
        contactList = _loadContacts();
    } 
}

// Helper Function 2
export const _loadContacts = () => {
    Contacts.getAll((err, data2) => {
      if (err) {
        return []; 
      }
      else {
        let candidates = [];
        for (let i = 0; i < data2.length; i++) {
            let candidateObject = { name: candidateRecord.givenName + " " + candidateRecord.middleName + " " + candidateRecord.familyName };
            candidates.push(candidateObject);
        }
        return contactList; 
      }
  });
}

Answer 1

По-видимому, проблема не в создателе действий, а в вспомогательных функциях, которые не поддерживают новый стиль обещаний (асинхронное ожидание).Итак, вот решение ...

// Action Creator: 
// No changes are required. Original code is good. 

// Helper Function 1
export const fContactImport = async () => {
  let contactList = [];
  if (Platform.OS === "android") {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
        {
            title: "Contacts",
            message: "This app would like to view your contacts."
        },
      );

      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        contactList = await _loadContacts();
      } else {
        console.log('Contacts access denied');
      } 

    } catch (err) {
      console.warn(err);
    } 
  } else {
    contactList = await _loadContacts();
  }
  return contactList;
}

// Helper Function 2
export const _loadContacts = () => {
  return new Promise((resolve, reject) => {
    Contacts.getAll((err, data2) => {
      if (err) {
        reject([]);
      }
      else {
        let candidates = [];
        for (let i = 0; i < data2.length; i++) {
            let candidateObject = { name: candidateRecord.givenName + " " + candidateRecord.middleName + " " + candidateRecord.familyName };
            candidates.push(candidateObject);
        } 
        resolve(candidates);
      }
    });
  });
}