Aktionen (Abspielen von Sound) basierend auf Redux speichern Änderungen

Question

Ich baue eine App, die einen Laden mit einem "Angebote" Abschnitt des Statusbaums (ImmutableJS List Object) enthält. Ich muss etwas unternehmen (einen Browsersound abspielen), wenn ein Gegenstand zu dieser Liste hinzugefügt wird. Elemente können dieser Liste über verschiedene Arten von Redux-Aktionen hinzugefügt werden.

Ich versuche herauszufinden, die beste Möglichkeit, auf die Änderungen an einem bestimmten Teil des Ladens zu reagieren. Ich könnte es in jeder Aktion/Reduktionsmethode tun, aber dann würde ich es überall haben. Ich hätte lieber einen zentralen Platz, um mit der Logik umzugehen.

Was ist der beste Weg, damit umzugehen? Soll ich einen generischen Filialteilnehmer erstellen und habe eine eigene Logik, um die Listenwerte zu verfolgen?

Answer 1

In diesem Fall ist Ihre beste Wette ein Ladenhörer. Entweder eine einfache Listener-Funktion oder eine Redox-verbundene React-Komponente.

eine einfache Funktion Unter der Annahme, Lärm zu machen:

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

Sie können einen Speicher Beobachter erstellen und für Änderungen hören:

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

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

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

    prevState = nextState 
    }) 
} 

Sie können das gleiche erreichen mit einem React Komponente:

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) 

Solange ein Notifier unter dem gerenderten Baum vorhanden ist, wird er auf Änderungen prüfen a nd spielen den Ton entsprechend ab. Der Vorteil dieses Ansatzes besteht darin, dass Sie das Austragen des Ereignisses nicht besonders sorgfältig durchführen müssen, wenn Sie ruhig bleiben möchten, und das serverseitige Rendern nahtlos funktioniert.