reactjs - 基于 Redux 存储更改的操作(播放声音)

Question

我正在构建一个应用程序，其中包含一个带有状态树“优惠”部分的商店(ImmutableJS 列表对象)。每当将项目添加到此列表时，我都需要采取一些操作(播放浏览器声音)。可以通过几种不同类型的 Redux 操作将项目添加到此列表中。

我正在尝试找出对商店特定部分的变化使用react的最佳方式。我可以在每个操作/ reducer 方法中执行此操作，但随后我会将其放在各处。我宁愿有一个中心位置来处理逻辑。

处理这个问题的最佳方法是什么？我应该创建一个通用商店订阅者并拥有自己的逻辑来跟踪列表值吗？

Answer 1

在这种情况下，你最好的选择是存储监听器。一个普通的监听器函数或者一个 redux 连接的 React 组件。

假设一个简单的函数来发出噪音:

function playSound () {
  const audio = new Audio('audio_file.mp3')
  audio.play()
}

您可以创建一个商店观察者并监听更改:

function createSoundObserver (store) {
  let prevState = store.getState()

  return store.subscribe(() => {
    const nextState = store.getState()

    if (prevState.messages.length < nextState.messages.length) {
      playSound()
    }

    prevState = nextState
  })
}

您可以使用 React 组件实现相同的目的:

import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'

class Notifier extends Component {

  static propTypes = {
    messages: PropTypes.array.isRequired
  }

  componentDidUpdate (prevProps) {
    if (this.props.messages.length > prevProps.messages.length) {
      playSound()
    }
  }

  render () { return null }
}

export default connect((state, props) => {
  const {messages} = state
  return {messages}
}, {})(Notifier)

只要渲染树中存在通知程序，它就会检查更改并相应地播放声音。这种方法的优点是，如果您想保持安静，则无需额外注意取消订阅事件，并且它可以无缝地进行服务器端渲染。