保持容器之间的一致状态答案

【问题标题】：Maintain consistant state between containers保持容器之间的一致状态
【发布时间】：2016-05-24 11:23:08
【问题描述】：

我正在使用 React/Redux 应用程序。在我的应用程序中，我有一个“AllRestaurants”容器遍历 JSON 对象数组并创建餐厅列表。

然后，我使用 React-Router 进行链接，以允许从该列表中单击餐厅名称并渲染一个“餐厅”容器，该容器将包含该特定餐厅及其所有详细信息。

单击餐厅名称并在页面上将“AllRestaurants”列表容器替换为“Restaurant”容器后，我所在的州确实有“restaurants”和“selectedRestaurant”可用；但是，当我在已加载“餐厅”容器并点击刷新的页面上时，我所在状态下的 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;
  }
}

【问题讨论】：

“刷新页面”是指浏览器刷新，对吗？
是的，浏览器刷新。
我也很好奇这里的最佳实践，但我相信您需要根据Redux Store docs 从服务器端对初始状态进行水合。因此，如果您在浏览器上点击刷新，它会从服务器请求例如 /restaurants/some-restaurant，然后服务器从数据库加载该 json 并将其以与您导航时从客户端相同的格式放入存储中来自/restaurants。如果 React/Redux 可以自动处理从父容器/组件（餐厅列表）加载状态，那就太好了。

标签： reactjs redux

【解决方案1】：

另一个解决方案是检查餐厅的状态及其 null，然后调用将从服务器获取数据并恢复状态的操作。

例如：

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

【讨论】：