ReactJS - Использование setState с firebase listen

Question

Ну, я уже знал, что мы должны сделать что-то подобное, чтобы поддерживать состояние в актуальном состоянии с изменениями в Firebase.

import FirebaseRef from '...'
   .
.
.
class MyComponent extends React.Component {
 state = {
      maxVotes: 0  
    }

componentDidMount() {
   const { boardId } = this.props
   FirebaseRef.child(`boards/${boardId}/maxVotes`).on('value', snapshot => {
      this.setState({maxVotes: snapshot.val()})
   })
}

Но моя привычка кодирования - делегировать вызов API в другом файле и импортировать его.к компоненту.Можно ли сделать что-то подобное?

import { setMaxVotes } from ...
.
.
.
 componentDidMount() {
   const { boardId } = this.props
   setMaxVotes(boardId)
}

А как выглядит метод setMaxVotes?Должен ли я усложнять подобные вещи, или это не самая лучшая практика?

Answer 1

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

componentDidMount() {
   const { boardId } = this.props
   setMaxVotes(boardId, 'value', snapshot => {
      this.setState({maxVotes: snapshot.val()})
   })
}

setMaxVotes(boardId, eventType, cb) {
   FirebaseRef.child(`boards/${boardId}/maxVotes`).on(eventType, cb);
}