コンテナ間の一貫した状態を維持する

Question

私はReact/Reduxアプリケーションを使っています。私のアプリでは、「AllRestaurants」コンテナに一連のJSONオブジェクトを繰り返し、レストランのリストを作成します。

次に、React-Routerを使用して、そのリストからレストランの名前をクリックし、その特定のレストランとそのすべての詳細が表示される「レストラン」コンテナを表示できるようにします。

レストランの名前がクリックされ、 'AllRestaurants'リストコンテナが 'Restaurant'コンテナのページで置き換えられると、私は自分の状態で 'レストラン'と 'selectedRestaurant'を利用できます。しかし、すでにロードされている 'Restaurant'コンテナのあるページで、リフレッシュを実行すると、私のselectedRestaurantが自分の状態になっています（これはデフォルト状態です）。

私の状態が既に選択したレストランを認識し、 'レストラン'コンテナが既に読み込まれている場合に設定されるように、この設定をどうすればできますか？

ありがとうございました！

AllRestaurants.js（容器）

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（減速）

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

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

export default rootReducer; 

restaurantActions.js（アクション）

const SELECT_RESTAURANT = 'SELECT_RESTAURANT'; 

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

SelectRestaurantReducer.js（減速）

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

別の解決策は、それがレストランの状態を確認し、そのヌルは、サーバからデータを取得し、状態を復元しますアクションを呼び出すことです。例えば

： "ページを更新し、" あなたはブラウザの更新を意味し、正しいことで

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