Reduxストアの変更に基づいたアクション（音の再生）

Question

状態ツリーの「オファー」セクション（ImmutableJSリストオブジェクト）を含むストアを含むアプリケーションをビルドしています。このリストに項目が追加されるたびに、何らかのアクション（ブラウザのサウンドを鳴らす）をする必要があります。アイテムは、いくつかの異なるタイプのReduxアクションを介してこのリストに追加できます。

私は、ストアの特定の部分の変更に対応する最善の方法を見つけようとしています。私は各アクション/レデューサーの方法でそれを行うことができましたが、私はそれを全面的に持っていました。私はむしろ論理を扱うための1つの中心的な場所を持っています。

これを処理する最善の方法は何ですか？ジェネリックストア加入者を作成して、リストの値を把握するための独自のロジックを持っている必要がありますか？

Answer 1

この場合、あなたの最善の策は店のリスナーです。プレーンなリスナー関数またはレフィックスに接続された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) 

レンダリングされたツリーの中にNotifierが存在する限り、変更されたそれに応じて音を再生する。この方法の利点は、静かなままにしたい場合にイベントの購読解除に特別な注意を払う必要がなく、サーバー側のレンダリングがシームレスに機能することです。