Redux: Auswirkungen auf zwei Zustandstasten

Question

alle!

Ich bin neu in Redux und ich versuche Wetter App zu bauen. Mein Zustand ist wie folgt aussieht:

const state = { 
    cities: [], 
    selectedCity: {} 
} 

I Stadt Minderer und selectedCity Minderer haben. Wenn der Benutzer alle Städte mit Ausnahme der letzten löscht, möchte ich selectedCity auf diesen zurücksetzen. Wie kann ich selectedCity beim Städtewechsel beeinflussen? (In diesem Fall aus dem Array Städte löschen)

Answer 1

Es gibt keine Möglichkeit, dies automatisch zu tun. Sie müssen entweder die selectedCity ändern, wenn Sie das Cities-Array ändern, oder eine Bedingung verwenden.

cities.length === 1 ? cities[0] : selectedCity in der Render-Funktion oder wo immer Sie es brauchen.

Edit:

Was Sie zu tun versuchen, eine erweiterte Asynchron-versammelten Version der aktiven Daten erfordert in den Städten gespeichert ein Wesen Nebenwirkungen.

Eine saubere Art und Weise, so etwas zu tun, wie dies wäre:

constructor(props) { 
    super(props); 
    this.cityChangeHandler = this.cityChangeHandler.bind(this); 

cityChangeHandler(city) { 
    changeActive(city); // That's an action, which will update the Redux store. 
} 

render() { 
    return (
    <div>{this.props.selectedCity && selectedCity.name}</div> 
); 

function mapStateProps(state) { 
    selectedCity: state.selectedCity, 
    cities: state.cities, 
} 

Answer 2

Wow! Ich habe die Antwort gefunden!

Ich habe vergessen, dass in async Aktion außer "dispatch" übergeben wir GetState-Methode als zweites Argument in thunk Middleware.

Zum Beispiel:

export default function thunkMiddleware({ dispatch, getState }) { 
    return next => action => { 
     typeof action === 'function' ? 
      action(dispatch, getState) : 
      next(action); 
    } 
} 

Diese Lösung ist: in Aktion, nachdem sync Dispatching DELETE_CITY überprüfen wir getState() Städte Länge.. Wenn es gleich 1 ist, senden Sie die CHOOSE_CITY-Aktion mit dieser Stadt.

Zum Beispiel:

export function deleteCity(city) { 
    return function(dispatch, getState) { 
     dispatch({ 
      type: CITY_DELETE, 
      payload: city 
     }) 

     var currentCitiesLength = getState().cities.length; 
     if(currentCitiesLength == 1) { 
      dispatch(selectCity(getState().cities[0])); 
     } else if(currentCitiesLength == 0) { 
      // Pass null to clean selectedCity 
      dispatch(selectCity(null)); 
     } 
    } 
}