在 Redux 的 Action 中，调用带有回调的函数（使用 async/await 和 React-Native-Contacts）

Question

我正在开发一个移动应用程序，它使用 React-Native、Redux 和 React-Native-Contacts。

在 action creator 中，我试图调用一个函数（来自 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 中，而是在辅助函数中，它不支持新的承诺样式 (async/wait)。所以，这是解决方案...

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

在 Redux 的 Action 中，调用带有回调的函数（使用 async/await 和 React-Native-Contacts）

In a Redux's Action, Calling a Function with Callbacks (Using async/await with React-Native-Contacts)

react-native

redux

redux-thunk

react-native-contacts