ReactJS-將setState與Firebase一起使用

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調用委派給不同的模塊，但是在不同的模塊中設置react組件狀態不是最佳實踐。 因此，您可以為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);
}