Zeigt Snackbar Reagieren Redux

First off, ich bin völlig neu zu Reagieren und Redux.

Ich habe Probleme mit dem zeigen der Snackbar aus material-ui als Benachrichtigung-panel, wenn ich schon abgesetzt, ein Ereignis.

Siehe mockup-code für mein Beispiel. Die Meldung wird nicht angezeigt auf diese Weise seit this.props.sending im App – Komponente wird zu false sofort beim API-Aufruf erfolgreich ist.

Wenn ich jetzt überspringen Sie die SOMETHING_FULFILLED Versand alles scheint gut zu funktionieren. Die state.open des Notification – Komponente auf false Dank meiner onRequestClose Funktion, aber da die this.props.sending in meinem App Komponente noch true – dann jedes mal die App Komponente neu gerendert, es zeigt die Meldung.

Eine Idee, wie ich umsetzen würden das richtig?

Habe ich eine action etwa wie folgt aussieht.

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

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

Und meine reducer suchen, wie diese.

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 angeschlossenen Komponente zu laden.

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.

import React, { Component } from 'react'
import Snackbar from 'material-ui/Snackbar'

class Notification extends Component {
  constructor(props) {
    super(props)
    this.state = { open: false }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.sending) {
      this.setState({ open: true })
    } else {
      this.setState({ open: false })
    }
  }

  closeNotification = () => {
    this.setState({ open: false })
  }

  render() {
    return (
      <Snackbar
        open={this.state.open}
        message={'test'}
        autoHideDuration={4000}
        onRequestClose={this.closeNotification}
      />
    )
  }
}

export default Notification



One Reply
  1. 3

    Wenn ich bin das Lesen Sie richtig, es klingt wie Sie Ihre Snackbar ordnungsgemäß funktioniert, aber es schließt zu schnell. Sie möchten, es zu zeigen, aber dann das automatische schließen sich 4 Sekunden später, auch wenn der API-Aufruf an sich dauerte nur 5 Sekunden zum Beispiel. Ist das richtig? Wenn ja, ich glaube, Sie können einfach überspringen Sie re-Rendern der Komponente, wenn die state.open ändert sich von true auf false (aber immer noch erlauben, das Rendern beim Wechsel von false auf true):

    shouldComponentUpdate(nextProps, nextState) {
      //Only re-render when snackbar is going from closed to open
      return !this.state.open && nextState.open;
    }
    • Dieser Tat es. Einfach und sauber. Dank einer Tonne, Jeff!
    • genial, froh zu helfen!
    • Aber was soll ich tun, wenn ich brauche, um zu zeigen, snakbar auf Anfrage Erfolg oder Misserfolg !!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.