javascript - 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()})
   })
}

但我的编码习惯是委托(delegate)其他文件中的API调用并将其导入到组件中。我可以做这样的事情吗？

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

setMaxVotes 方法是什么样的？我应该把这样的事情复杂化吗，或者这不是最佳实践？

Answer 1

将 API 调用委托(delegate)给不同的模块是很常见的，但在不同的模块中设置 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);
}