Удалить прослушиватель из Firebase, если несколько слушателей используют одну ссылку - PullRequest
Новая
       17

Удалить прослушиватель из Firebase, если несколько слушателей используют одну ссылку

0 голосов
/ 20 мая 2019

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

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

const FirebaseListener = (WrappedComponent) => {
    return class extends Component {
        state = {
            ref: null,
            data: {},
        }

        componentDidMount() {
            const { device } = this.props;

            const ref = repository.listenDevice(device.id);
            ref.once('value').then((snapshot) => {
                const data = snapshot.val();
                this.setState({ data });
            });

            ref.on('child_changed', (snapshot) => {
                const value = snapshot.val();
                const prop = snapshot.key;
                const { data } = this.state;
                this.setState({ data: { ...data, [prop]: value } });
            });
            this.setState({ ref });
        }

        componentWillUnmount() {
            const { ref } = this.state;
            if (ref !== null) {
                ref.off();
            }
        }

        render() {
            const { data } = this.state;
            return (
                <WrappedComponent data={data} {...this.props} />
            );
        }
    };
};

Но в том, как я структурировал приложение, я в итоге сделал два слушателя ната же ссылка, и когда я звоню ref.off(), я теряю обоих слушателей, что не является предполагаемым поведением.

Это происходит так: 

1. already          2. push configview into stack   3. has another
has listener        and adds another listener       listener
------------             ------>                 --------------
|           |                                    |             |
|           |                                    |             |
| listview  |                                    |  configview |
|  screen   |                                    |   screen    |
|           |                                    |             |
-------------            <-------                ---------------
5. doesn't have           4. pops configview from stack
listener anymore       and removes both listeners

В принципе, есть лиЛюбой способ удалить только определенный слушатель из ссылки на firebase?

1 Ответ

0 голосов
/ 20 мая 2019

Вы можете точно контролировать, какие слушатели будут удалены. Ключевым моментом здесь является то, что вам нужно иметь ссылку на функцию обратного вызова. С помощью объявлений анонимных функций вы можете получить эту ссылку в качестве возвращаемого значения из on(): 

let listener = ref.on('child_changed', (snapshot) => {
    const value = snapshot.val();
    const prop = snapshot.key;
    const { data } = this.state;
    this.setState({ data: { ...data, [prop]: value } });
});

Затем вы можете удалить этого слушателя с помощью: 

ref.off('child_changed', listener);

Также см. Справочную документацию on и off.

...