Где я должен подписаться на предметы из Firebase - PullRequest
Новая
       75

Где я должен подписаться на предметы из Firebase

0 голосов
/ 21 марта 2020

Я создаю реагирующий натив с использованием базы данных RedEx и Firebase Realtime Database, и меня беспокоит вопрос о том, где подписаться, чтобы получать мои элементы на экране. Я использую 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: "Извините, мой английский sh"

1 Ответ

0 голосов
/ 21 марта 2020

шаблон, который вы используете, в порядке. Если внутри полезной нагрузки у вас есть массив с новыми элементами, ваш подход работает нормально. Но я предполагаю, что вы получаете те же элементы, только с любым обновленным свойством. Так, например, если у вас есть магазин домашних животных, подобный этому:

pets: [{id: 1, name: 'what'}], и ваша полезная нагрузка: [{id: 1, name: ' what2 '}], теперь вы оба сцепились в своем магазине, что плохо, потому что обновлен один и тот же объект. Итак, если у вас будет полный список, обновленный в запросе, я бы просто изменил ваш редуктор на: 

const initialState = { pets: [] };

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

Так что каждый раз, когда вы делаете запрос API, у вас будет обновленный список элементов.

Другой случай, если вы получаете в запросе только обновленные данные, и вам придется фильтровать ваш объект на основе идентификаторов, а затем просто заменять обновленные. Но я не думаю, что это ваш случай.

...