Ist es eine gute Idee browserhostory.push in Aktion Helfer zu benutzen?

Question

Ist es eine gute Idee browserhostory.push in Aktion Helfer zu benutzen?

stimmen

0

In meiner ReactApp muss ich Entscheidung treffen , basierend auf Daten , die ich vom Server empfangen.

Wenn Daten erwartet ( Dispatch actions to update state)
Wenn Daten Fehler - Tag ( browserhistory.push('/notfound');)
Wenn erwartete Daten nicht in der Lage zu analysiert ( browserhistory.push('/error');)

In meiner app Struktur, ich verwende Redux, React-Routerund React-redux-RouterBibliotheken , aber keine Middleware. Ich habe actionHelpers zu machen Ajax - Aufrufe gemacht und dann unverzüglich geeignete Maßnahmen mit Action - Creator. Diese actionHelperMethoden werden in Komponenten ausgesetzt Zustand zu ändern. Meine Fragen:

Was ist der beste Weg, um diese Szenarien zu behandeln?
Ist actionHelperder beste Ort , um diese Entscheidungen zu treffen?

Ich mag nicht für jetzt jede Middleware verwenden, aber bitte lassen Sie mich wissen, ob es eine gute Idee, Middleware zu verwenden, um diese Szenarien zu behandeln.

reactjs redux react-router react-redux react-router-redux

Veröffentlicht am 12/08/2016 um 03:17
vom benutzer Anil Sharma

In anderen Sprachen...

1 antworten

Ashish Chaudhary · Accepted Answer · 2016-08-12 06:30

Aktionen sind nicht der Ort, wo man Umleitungen tun soll. Dieses Verhalten sollte in der Komponente umgesetzt wird selbst und Aktionen sollten die Speicher aktualisieren gelassen werden.

Sie können das verwenden Redux-Thunk Middleware hier , die Ihnen eine Funktion zum Versand ermöglicht (was erhält dispatchanstelle der Objektaktionen als Argument. Sie können dann diese Funktion in einem Versprechen wickeln und verwenden Sie es in componentWillMount.

In Ihren Aktionen Datei:

updateReduxStore(data) {
  return { 
      type: SOME_TYPE,
      payload: data.something
  };
}

fetchAndValidateData() {
  ...
}

checkData() {
    return function(dispatch) {
        return new Promise((resolve, reject) => {
            fetchAndValidateData().then((data) => {
                try {
                    if (JSON.parse(data).length > 0) {
                        dispatch(updateReduxStore(data));
                        resolve('valid data');
                    } else if (data.error) {
                        reject('error in data');
                    }
                }
                catch(err) {
                  reject('malformed data');
                }
            });
        });
    };
}

Dann in Ihrer Komponente:

componentWillMount() {
    this.props.checkData()
      .then((message) => {
          console.log(message); //valid data
      })
      .catch((err) => {
          if (err === 'error in data') {
              browserHistory.push('/notfound');
          } else if (err === 'malformed data') {
              browserHistory.push('/error');
          }
      });
}

Redux-Thunk-Middleware ist für solche Anwendungsfälle gemacht.