Короче говоря, если я постоянно получаю данные из Firebase в моем приложении React с использованием активных слушателей, нужно ли мне использовать Redux для локального хранения данных?

Я спрашиваю только о серьезных функциональных причинах, которые могут привести к поломке приложения, если Redux не будет использоваться в этом сценарии.

1
Sorin Pavelescu 25 Июн 2020 в 15:19

1 ответ

Лучший ответ

Redux не нужен

Redux - это всего лишь одно решение для удержания состояния в вашем приложении реакции. Вам это не "нужно".

Но что вам действительно нужно, так это способ вызвать рендеринг с вашими данными. Redux сделает это с помощью ловушки или функции mapStateToProps. Другой способ сделать это - использовать ловушку useState для прямого получения и установки данных на уровне компонентов. Вы также можете использовать ловушку useContext, чтобы поместить данные firebase в ваш контекст. Все зависит от варианта использования ваших данных, но для этого есть много ресурсов.

Что хорошо в Redux, так это то, что вы можете создать подключенный слушатель, который запускает действие redux каждый раз, когда запускается сокет.

Пример триггера действия, который я сделал из этого некоторое время назад

Я бы нашел лучший способ остановить срабатывание того же действия, чем здесь. Преимущество этого кода в том, что ваше хранилище redux такое же, как и ваша структура firebase, и все под ключом firebase.

/**
 * @description
 * this function adds a firebase socket listener. The listener will fire
 * an action every time the value is changed.
 *
 * @param {String} document - firebase document name (can be a path)
 * @param {String} key - uid for an item in the firebase
 * @returns {Function}
 */
const fetchReference = (document, key = null) => (dispatch, getState) => {
  const documentReference = firebase.database().ref(document);
  const reference = key ? documentReference.child(key) : documentReference;

  reference.on('value', (snapshot) => {
    const state = getState();
    const firebaseDocument = state.firebase[document];
    const snapshotValue = snapshot.val();

    if (
      firebaseDocument
      && firebaseDocument[key]
      && (JSON.stringify(firebaseDocument[key]) === JSON.stringify(snapshotValue))
    ) {
      return;
    }

    dispatch({
      type: FETCH_FIREBASE_REFERENCE,
      payload: snapshotValue,
      document,
      key,
    });
  });
};
0
Joe Lloyd 25 Июн 2020 в 12:31