如何獲取我的Firebase偵聽器以在React Native應用程序中將數據加載到Redux狀態，以便可以在ComponentDidMount函數中讀取數據？

Question

我正在嘗試將存儲在Firebase中的通知令牌（ notificationToken ）加載到React Native組件。

將notificationToken加載到我的redux狀態后，我想檢查我的設備權限，以查看我在componentDidMount()運行的函數getExistingPermission()中notificationToken是否已過期。

如果令牌已過期，則我將Firebase中的令牌替換為新令牌。 如果相同，則什么都不會發生（這是預期的功能）。

當我運行函數getExistingPermission()來檢查令牌是否最新時，拉入notificationToken的Firebase偵聽器不會及時加載，因此它始終使用“ new”對Firebase數據庫進行寫操作令牌。

我很確定使用async / await可以解決此問題，但還無法使其正常工作。 在我在componentDidMount()函數中運行任何函數之前，如何知道如何確保先將notificationToken從Firebase加載到Redux狀態？ 下面的代碼-謝謝！

src / screens / Dashboard.js

我應該使用.then()還是async / await運算符來確保在通過getExistingPermission()函數運行notificationToken之前將其加載？

import {
  getExistingPermission
} from '../components/Notifications/NotificationFunctions';

componentDidMount = async () => {
        // Listener that loads the user, reminders, contacts, and notification data
        this.unsubscribeCurrentUserListener = currentUserListener((snapshot) => {
          try {
            this.props.watchUserData();
          } catch (e) {
            this.setState({ error: e, });
          }
        });
        if (
          !getExistingPermission(
            this.props.notificationToken, //this doesn't load in time
            this.props.user.uid)
          ) {
          this.setState({ showNotificationsModal: true });
        }
      };

src / components / Notifications / NotificationFunctions.js

問題可能不在這里

export const getExistingPermission = async (
  notificationToken,
  uid,
) => {
  const { status: existingStatus } = await Permissions.askAsync(
    Permissions.NOTIFICATIONS
  );
  if (existingStatus !== 'granted') {
    console.log('status not granted');
    return false;
  } else {
    let token = await Notifications.getExpoPushTokenAsync();
    /* compare to the firebase token; if it's the same, do nothing,
    if it's different, replace */
    if (token === notificationToken) {
      console.log('existing token loaded');
      return true;
    } else {
      console.log('token: ' + token);
      console.log('notificationToken: ' + notificationToken);
      console.log('token is not loading, re-writing token to firebase');
      writeNotificationToken(uid, token);
      return false;
    }
  }
};

src / actions / actions.js

// Permissions stuff
watchPermissions = (uid) => (
  (dispatch) => {
    getPermissions(uid + '/notificationToken', (snapshot) => {
      try {
        dispatch(loadNotificationToken(Object.values([snapshot.val()])[0]));
      }
      catch (error) {
        dispatch(loadNotificationToken(''));

        // I could call a modal here so this can be raised at any point of the flow
      }
    });
  }
);

// User Stuff
export const watchUserData = () => (
  (dispatch) => {
    currentUserListener((user) => {
      if (user !== null) {
        console.log('from action creator: ' + user.displayName);
        dispatch(loadUser(user));
        dispatch(watchReminderData(user.uid));  //listener to pull reminder data
        dispatch(watchContactData(user.uid));  //listener to pull contact data
        dispatch(watchPermissions(user.uid));  //listener to pull notificationToken
      } else {
        console.log('from action creator: ' + user);
        dispatch(removeUser(user));
        dispatch(logOutUser(false));
        dispatch(NavigationActions.navigate({ routeName: 'Login' }));
      }
    });
  }
);

export const loadNotificationToken = (notificationToken) => (
  {
    type: 'LOAD_NOTIFICATION_TOKEN',
    notificationToken,
  }
);

Answer 1

托尼給了我答案。 需要將權限檢查移至componentDidUpdate() 。 對於那些有類似問題的人，組件如下所示：

src / screens / Dashboard.js

componentDidUpdate = (prevProps) => {
    if (!prevProps.notificationToken && this.props.notificationToken) {
      if (!getExistingPermission(
        this.props.notificationToken,
        this.props.user.uid
      )) {
        this.setState({ showNotificationsModal: true });
      }
    }
  };

Answer 2

查看以下內容的redux訂閱者： https : //redux.js.org/api-reference/store#subscribe 。 我實現了一個訂戶來管理諸如STATE1_DO_THIS，STATE2_THEN_DO_THAT之類的小型狀態機，並將該狀態存儲在redux中，並使用它來呈現您的組件。 只有訂戶應更改這些狀態​​。 這為您提供了一種處理棘手的流的好方法，您可以在執行action2之前先等待action1完成。 這有幫助嗎？