react-native - 在 Redux 的操作中，使用回调调用函数（使用 async/await 和 React-Native-Contacts）

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; 
      }
  });
}

标签： react-nativereduxredux-thunkreact-native-contacts

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);
      }
    });
  });
}