基于Redux商店更改的操作（播放声音）

Question

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

我想弄清楚对商店某个特定部分的变化作出反应的最佳方法。我可以在每个动作/减速器方法中做到这一点，但随后我会把它放在所有的地方。我宁愿有一个中心位置来处理逻辑。

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

Answer 1

在这种情况下，您最好的选择是商店听众。无论是普通的侦听器函数还是连接React的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 
    }) 
} 

可以实现与一个阵营相同成分：

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) 

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