解决方案：在服务器上预加载商店

Question

我目前正在开发一个不支持服务器渲染的应用，所以当客户端加载应用时我必须处于空状态。然后调度fetch并立即更新状态。

我有一个组件（某种编辑器）应该根据url-parameter找到一个对象。我的mapStateToProps函数看起来像这样：

const mapStateToProps = (state, ownProps) => {
  return {
    book: state.library.list.find(function(book){ return book.id === ownProps.params.book_id})
  }
}

当组件运行getInitialState时，

this.props.book未定义，因此在获取状态时它不会获得更新。当组件加载时，我在浏览器的控制台中收到以下错误：

TypeError: undefined is not an object (evaluating 'this.props.book.title')

从那时起编辑器保持空白，即使稍后从服务器收到状态。

我知道如何解决这个问题吗？

Answer 1

当您将数据从this.props.book加载到未定义的

时，您需要做的是放一块手表

if(this.props.book) {
  //do something with this.props.book
}

Answer 2

解决方案：在服务器上预加载商店

我终于找到了问题的答案。我所做的是，如果用户已登录（通过JSON网络令牌），则检查每个请求。如果用户已登录，则预加载状态并将其与第一个请求一起发送（将其分配给window._PRELOADED_STATE_，并在响应字符串中添加脚本标记）。

然后我还在客户端代码上添加了两行

const preloadedState = window.__PRELOADED_STATE__
const store = createStore( rootReducer, preloadedState, applyMiddleware(apiMiddleware, thunkMiddleware) );

然后在编辑器组件要求之前更新了商店。

此解决方案基于redux主页http://redux.js.org/docs/recipes/ServerRendering.html

中介绍的一些想法

在数组初始状态React-Redux app中查找对象

2 个答案:

解决方案：在服务器上预加载商店