Zeige Snackbar mit React Redux

Question

Zunächst einmal, ich bin völlig neu in React und Redux.

Ich habe Probleme mit der Anzeige der Snackbar von material-ui als ein Benachrichtigungsfeld, wenn ich ein Ereignis gesendet habe.

Siehe Mockcode für mein Beispiel. Die Benachrichtigung wird auf diese Weise nicht angezeigt, da this.props.sending in App Komponenten sofort nach dem erfolgreichen API-Aufruf auf false gesetzt wird.

Jetzt, wenn ich den SOMETHING_FULFILLED Versand überspringen, scheint alles gut zu funktionieren. Die state.open der Notification Komponente wird false dank meiner onRequestClose Funktion gesetzt, aber da die this.props.sending in meiner App Komponente noch zu true gesetzt ist - dann jedes Mal die App Komponente wieder macht sie die Anzeige zeigt.

Irgendeine Idee, wie ich das richtig umsetzen würde?

Ich habe eine action, die in etwa so aussieht.

const doSomething = (data) => { 
    return dispatch => { 
    dispatch({ 
     type: 'SOMETHING_PENDING', 
     payload: { data } 
    }) 

    apiCall.then((complete) => { 
     dispatch({ 
     type: 'SOMETHING_FULFILLED', 
     payload: { data } 
     }) 
    }) 
    } 
} 

Und meine reducer sah so aus.

const initialState = { 
    sending: false 
} 

const SomeReducer = (state=initialState, action) => { 
    switch (action.type) { 
    case 'SOMETHING_PENDING': { 
     return { 
     ...state, 
     sending: action.payload 
     } 
    } 

    case 'SOMETHING_FULFILLED': { 
     return { 
     ...state, 
     sending: false 
     } 
    } 

    default: { 
     return state 
    } 
    } 
} 

export default SomeReducer 

Meine App Komponente mit dem Geschäft verbunden.

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

const storeData = (store) => { 
    const data = { 
    sending: store.Reducer.sending 
    } 

    return data 
} 

class App extends Component { 
    render() { 
    return (
     <Notification sending={this.props.sending} /> 
    ) 
    } 
} 

export default connect(storeData)(App) 

Und meine Notification Komponente.

Answer 1

Wenn ich Sie richtig lese, klingt es so, als hätten Sie Ihre Snackbar richtig funktioniert, aber es schließt zu schnell. Sie möchten, dass es angezeigt wird, sich aber selbst 4 Sekunden später automatisch schließt, selbst wenn der API-Aufruf selbst nur 0,5 Sekunden dauert. Ist das korrekt? Wenn ja, ich glaube, Sie einfach wieder Rendering überspringen können Ihre Komponente, wenn die state.open von true in false geändert wird (aber machen immer noch erlauben, wenn von false auf true zu gehen):

shouldComponentUpdate(nextProps, nextState) { 
    // Only re-render when snackbar is going from closed to open 
    return !this.state.open && nextState.open; 
}