在Redux应用程序中预加载initialState的最佳做法是什么?

Kev*_*Old 27 reactjs redux

我目前不满意使用Flux进行的黑客攻击,现在Redux用于在我的商店中填充initialState.

我总是在初始页面加载的情况下发送JSON的有效负载.通用JavaScript在我的某些应用程序中不是一个选项,因为它们并非全部由Node支持.我想关注如何在客户端上预加载数据的"最佳实践"和模式.然后,我觉得搬到服务器是微不足道的.

以下是我目前在工作中使用Redux的一些其他玩具应用程序的要点:

https://gist.github.com/kevinold/5767bb334472b7e2bfe3

总结一下:

  • 我正在向页面发送全局变量
  • 在componentDidMount()中,我正在调度"接收"并处理各种数据的动作.(当通过请求操作获取异步时,这些"接收"方法在处理这些数据位时使用,我在这里重新利用它们,因为我已经拥有了数据.)

这是有效的,并没有我们遇到的任何问题,但它感觉像一个我不是很满意的黑客.另外,我觉得Redux的初始状态并不满意我这样做.

根据http://rackt.org/redux/docs/recipes/ServerRendering.html和"客户端"部分,我可以将initialState传递给我的商店.

这是我正在帮助的另一个项目(KeystoneJS)的补丁.我将它的Keystone对象传递给initialState:

https://github.com/kevinold/keystone/commit/6f80c2f6f1e5c081361369a8bb31b75f1e62460f#diff-cd8e9933209e834b0519a0257bcfa914R8

虽然这确实有效,但正如你所看到的,我被迫匹配我的整体组合减速器的输出形状(https://github.com/kevinold/keystone/commit/6f80c2f6f1e5c081361369a8bb31b75f1e62460f#diff-b4b498ca92c4d05e050b45c725c26f9d)或者我会得到控制台警告等

我可能在处理这个问题时非常懒惰,但是当我添加/更改与reducers相关的任何内容时,我试图限制更新另一条数据(添加一个reducer,它们是如何编写的等等).

我意识到我可能必须正确地将这个initialState放入reducer.

我正在消化如何(https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/client.js#L25)处理它的initialState.

我非常感谢有关为他人工作的"最佳"和"现实世界"实践的一些反馈.

Dan*_*mov 21

我不完全理解这个问题,但我会尽力回答.

在componentDidMount()中,我正在调度"接收"并处理各种数据的动作.(当通过请求操作获取异步时,这些"接收"方法在处理这些数据位时使用,我在这里重新利用它们,因为我已经拥有了数据.)

这是派遣他们的不好的地方.如果您选择直接调度操作而不是直接生成初始状态,请在渲染之前执行此操作.换句话说,在创建商店后立即这样做!这样您就不会呈现初始空白状态.

虽然这确实有效,但正如你所看到的,我被迫匹配我的整体组合减速器的输出形状(https://github.com/kevinold/keystone/commit/6f80c2f6f1e5c081361369a8bb31b75f1e62460f#diff-b4b498ca92c4d05e050b45c725c26f9d)或者我会得到控制台警告等

您不应该initialState手动创建对象.您应该在服务器上创建一个Redux存储,在dispatch那里执行操作以预先填充数据,当它准备就绪时,调用store.getState()以检索要传递给客户端的状态.在客户端上,您将从全局变量中读取它,并使用它创建客户端存储实例.换句话说,您永远不必手动创建 - 您initialState应该在服务器上抓取它store.getState(),将其传递给客户端,并使用它创建商店.

因此,我不明白你描述的问题.如果您的reducer名称或嵌套更改,它也将在服务器上更改.您无需做任何"修复" - 如果您在客户端和服务器上都使用Redux,它们的状态结构将匹配.

我非常感谢有关为他人工作的"最佳"和"现实世界"实践的一些反馈.

  1. 如果在服务器上使用Redux,请按上述方法预先填充商店,并将其状态传递给客户端.在这种情况下,您需要使用initialState参数createStore().

  2. 如果您出于某种原因不在服务器上使用Redux 但是您想要预先填充数据(例如,您可能使用Node之外的其他内容),那么调度操作的方法是您的下一个最佳选择,因为它不需要您的后端知道状态.在这种情况下,您应该将这些操作作为JSON传递给客户端,并创建存储之后立即dispatch()它们全部传递给客户端.