Zunächst einmal, ich bin völlig neu in React und Redux.Zeige Snackbar mit React 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.
Dies tat es. Einfach und ordentlich. Vielen Dank, Jeff! – wannabefounder
genial, froh zu helfen! –
Aber was mache ich wenn ich Snakbar auf Anfrage Erfolg oder Misserfolg zeigen muss !! –