在createAsyncThunk中处理onSnapshot订阅

Question

目前我试图将firebase/firestore连接到我的react原生项目的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);
}),
);

有人知道我该怎么解决这个问题吗？

Answer 1

我的建议是创建一个单独的组件来侦听(在其useeffect内部(Firestore更改，并在发生更改时将事件发送到存储。在createasyncthunk中有一个订阅者似乎是不对的。