在数组初始状态 React-Redux 应用程序中查找对象

Question

我目前正在开发一个 不支持服务器渲染 的应用程序，因此当客户端加载该应用程序时，我必须处于空状态。然后调度一个获取并且 state 很快更新.

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

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

this.props.book 在组件运行 getInitialState 时未定义，因此在获取状态时不会获取更新。加载组件时，我的浏览器控制台出现以下错误：

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 应用程序中查找对象

Finding object in array initial state React-Redux app

react-redux

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