我应该在哪里订阅 Firebase 获取项目

Question

我正在使用 redux 和 Firebase 实时数据库构建一个原生反应，我担心在哪里订阅以在屏幕上获取我的项目。 我使用 useEffect 将订阅发送到 firebase db：

 useEffect(() => {
    dispatch(userActions.fetchPets());
  }, []);

在行动内部

export const fetchPets = () => {
  return async dispatch => {
    const user = await firebase.auth().currentUser;
    firebase
      .database()
      .ref(`pets/${user.uid}`)
      .on("child_added", snapshot => {
        const pet = snapshot.val() || null;

        dispatch({ type: ADD_PET, payload: pet });
      });
  };
};

我的问题是当我的屏幕重新渲染时，此操作再次执行，并填充重复的数据。 这是我的减速机：

case ADD_PET:
      return {
        ...state,
        pets: [...state.pets, action.payload]
      };

我的问题 我应该用键过滤我的状态以删除重复吗？ 我应该把我的订阅放在另一个地方吗？像中间件什么的？有这样的模式吗？

PS：“对不起我的英语”

Answer 1

您使用的模式很好。 如果在有效负载中您有一个包含新元素的数组，那么您的方法可以正常工作。但是，我假设你得到的是相同的元素，只是带有任何更新的属性。因此，例如，如果您的宠物店是这样的：

pets: [{id: 1, name: 'whatever'}]，你的有效载荷是：[{id: 1, name: 'whatever2'}]，现在你已经在你的 store 中连接了，有什么不好的，因为是同一个对象，更新了。 因此，如果您将在请求中更新完整列表，我只需将您的减速器更改为：

const initialState = { pets: [] };

case ADD_PET:
  return {
    ...state,
    pets: action.payload
  };

因此，每次您发出 api 请求时，您都会获得更新的元素列表。

另一种情况是，如果您只收到更新的请求，您将不得不根据 id 过滤您的对象，然后只替换更新的对象。但我不认为这是你的情况。