Behalten Sie den konsistenten Zustand zwischen den Containern bei

Question

Ich arbeite mit React/Redux App. In meiner App durchläuft ein 'AllRestaurants'-Container eine Reihe von JSON-Objekten und erstellt eine Liste von Restaurants.

Ich verwende dann React-Router, um zu verknüpfen, um auf einen Restaurantnamen aus dieser Liste zu klicken und einen "Restaurant" -Behälter zu rendern, der das spezifische Restaurant und all seine Details enthält.

Sobald der Name eines Restaurants angeklickt und der Listenbehälter "AllRestaurants" auf der Seite für einen Container "Restaurant" ersetzt wurde, stehen in meinem Bundesland "Restaurants" und "AusgewähltesRestaurant" zur Verfügung. Wenn ich jedoch auf der Seite bin, auf der der Container "Restaurant" bereits geladen ist, und auf Aktualisieren klicke, ist mein ausgewähltes Restaurant in meinem Status null (weil das der Standardstatus ist).

Wie kann ich dies einrichten, so dass mein Staat bereits mein ausgewähltes Restaurant kennt und eingestellt ist, wenn der 'Restaurant'-Container bereits geladen ist?

Vielen Dank!

AllRestaurants.js (Container)

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { Link } from 'react-router'; 
import { bindActionCreators } from 'redux'; 
import { selectRestaurant } from '../../actions/restaurantActions'; 

class AllRestaurants extends Component { 
    renderRestaurants() { 
    const allRestaurants = this.props.restaurants.map((restaurant) => { 
     return (
     <li 
      key={restaurant.name} 
      onClick={() => this.props.selectRestaurant(restaurant)} 
     > 
      <Link to={`/restaurants/${restaurant.linkName}`}> 
      <h1>{restaurant.name}</h1> 
      </Link> 
     </li> 
    ); 
    }); 
    return allRestaurants; 
    } 

    render() { 
    return (
     <div> 
     <ul>{this.renderRestaurants()}</ul> 
     </div> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
    restaurants: state.restaurants, 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ 
    selectRestaurant: selectRestaurant, 
    }, dispatch); 
} 

export default connect(mapStateToProps, mapDispatchToProps)(AllRestaurants); 

index.js (reducer)

import { combineReducers } from 'redux'; 
import allRestaurantsReducer from './allRestaurantsReducer'; 
import selectedRestaurantReducer from './selectedRestaurantReducer'; 

const rootReducer = combineReducers({ 
    restaurants: allRestaurantsReducer, 
    selectedRestaurant: selectedRestaurantReducer, 
}); 

export default rootReducer; 

restaurantActions.js (action)

const SELECT_RESTAURANT = 'SELECT_RESTAURANT'; 

export function selectRestaurant(restaurant) { 
    return { 
    type: SELECT_RESTAURANT, 
    payload: restaurant, 
    } 
} 

SelectRestaurantReducer.js (Reduzierer)

const SELECT_RESTAURANT = 'SELECT_RESTAURANT'; 

export default function(state = null, action) { 
    switch(action.type) { 
    case SELECT_RESTAURANT: 
     return action.payload; 
    default: 
     return state; 
    } 
} 

Answer 1

Eine andere Lösung besteht darin, dass der Zustand des Restaurants überprüfen und seine Null dann die Aktionen aufrufen, die die Daten vom Server holen wird und den Zustand wiederherzustellen.

Zum Beispiel:

componentWillMount() { 
    if(this.props.restaurant.length==0){ 
     this.props.youractions.call_the_actions() 
    } 
    }