在 createAsyncThunk 中处理 onSnapshot 订阅答案

【问题标题】：Handle onSnapshot subscription in createAsyncThunk在 createAsyncThunk 中处理 onSnapshot 订阅
【发布时间】：2021-04-08 07:22:17
【问题描述】：

目前我尝试将 firebase / firestore 连接到我的 react-native 项目的 redux 存储。

我用@reduxjs/toolkit 的createSlice 函数创建了一个reducer

const authSlide = createSlice({
  name: 'auth',
  initialState: initialState,
  reducers: {
    authLoading: state => {
      state.isLoading = true;
    },
    hasError: (state, action: PayloadAction<Error>) => {
      state = { ...state, error: action.payload, isLoading: false };
    },
  },
  extraReducers: builder => {
    builder.addCase(setUserData.pending, (state, action) => {});
    builder.addCase(setUserData.fulfilled, (state, action) => {});
    builder.addCase(setUserData.rejected, (state, action) => {});
  }
})

在 setUserData reducer 的操作中，我想订阅 firestore 中的更改，因此每次发生更改时都应更新状态。

我用这段代码试过了，它只工作过一次，但不是为了以后的更新

export const getUserDataById = createAsyncThunk(
  'auth/getUserData',
  async (uid: string, { rejectWithValue }) =>
    new Promise<User>((resolve, reject) => {
      const unsubscribe = userRef.doc(uid).onSnapshot(
        snapshot => {
          const data = snapshot.data();
          if (snapshot.exists && data) {
            resolve({ uid, ...data });
          } else {
            reject({ name: 'Auth error', message: i18n.t('error.userNotFound') });
          }
        },
        error => reject(error),
      );
      listenerUnsubscribeList.push(unsubscribe);
    }),
);

有人知道我该如何解决这个问题吗？

【问题讨论】：

Firebase 不是我的专业领域，但您可能想查看 react-redux-firebase 包。
感谢您的提示，我已经看过了，但我认为该软件包不适用于当前版本的 react-native-firebase

标签： firebase react-native redux react-redux redux-toolkit

【解决方案1】：

我的建议是创建一个单独的组件来侦听（在其 useEffect 中）Firestore 更改并在发生更改时将事件发送到商店。在 createasyncthunk 中拥有订阅者似乎并不正确。

【讨论】：

问题是没有诸如“用户”组件之类的东西。但是应该在应用程序的任何地方都可以使用 auth 商店。这就是为什么我需要将它与全局 redux 存储同步
好的。如果我理解您的要求，您应该将用户设置为 auth slice。然后使用 selectors 从任何组件的 auth slice 中获取它，对吗？您正在设置的这个用户是正在使用该应用程序的当前用户？或者可以是应用程序上的任何用户？我看到您在 auth slice 中进行设置，所以我推断出应该适用于当前经过身份验证的用户。如果是这样，基本上你想在你的应用程序中为当前经过身份验证的用户监听 firestore 的变化？
正确，当用户注册/登录时，他的帐户是在 firebase 中创建的。同时会在firestore中为他的userdata创建一个节点。这个节点应该被提取到我的 authState 切片中。当数据更改时，authState 应该会自动更新，所以我可以在整个应用程序中使用数据。
你为什么不创建一个新的 AuthUser 组件并将这个监听器添加到它的 useEffect 中。然后每当 firestore 用户更改时，调度 setuser。在你的 Redux 存储组件树中添加这个 AuthUser 组件，并从这个组件返回除了