基於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相應地播放聲音。這種方法的優點是，如果您想保持安靜，您不必額外注意取消訂閱事件，並且無縫地進行服務器端渲染。