reactjs - 在 Redux 应用程序中预加载初始状态的最佳实践是什么？

Question

我目前对使用 Flux 和现在使用 Redux 在我的商店中填充初始状态所想出的技巧并不满意。

我总是在初始页面加载时发送 JSON 有效负载。在我的一些应用程序中，通用 JavaScript 不是一个选项，因为它们并不全部受 Node.js 支持。我想重点关注如何在客户端上预加载数据的“最佳实践”和模式。然后，我觉得迁移到服务器是微不足道的。

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

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

总结:

• 我将随页面发送全局变量
• 在 componentDidMount() 中，我正在调度“接收”并处理各种数据的操作。 (当通过请求操作异步获取这些数据时，会使用这些“接收”方法，因为我已经拥有了数据，所以我在这里重新调整它们的用途。)

这有效，我们没有遇到任何问题，但感觉就像是我不太满意的黑客行为。另外，我觉得 Redux 的初始状态对我这样做并不满意。

根据http://rackt.org/redux/docs/recipes/ServerRendering.html和“客户端”部分，我可以将初始状态传递到我的商店。

这是我正在帮助的另一个项目 (KeystoneJS) 的补丁。我将其 Keystone 对象传递到初始状态:

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

虽然这确实有效，但正如您所看到的，我被迫匹配整个组合Reducers(https://github.com/kevinold/keystone/commit/6f80c2f6f1e5c081361369a8bb31b75f1e62460f#diff-b4b498ca92c4d05e050b45c725c26f9d)的输出形状，否则我将收到控制台警告等。

我可能在处理这个问题上非常懒惰，但是当我添加/更改与 reducer 相关的任何内容(添加 reducer ，它们的组成方式等)时，我会尝试限制更新另一条数据。

我意识到我可能必须这样做才能正确地将这个初始状态放入 reducer 中。

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

我非常感谢一些关于对其他人有效的“最佳”和“现实世界”实践的反馈。

Answer 1

我不太明白这个问题，但我会尽力回答。

In componentDidMount() I'm dispatching actions that “receive” and handle the various pieces of data. (These “receive” methods are used when processing these bits of data when they are fetched async via a request action, and I’m repurposing them here since I already have the data.)

这是一个不好的 dispatch 他们的地方。如果您选择分派(dispatch)操作而不是直接提供初始状态，请在渲染之前执行此操作。换句话说，在创建商店后立即执行此操作!这样您就不会渲染初始空白状态。

While that does work, as you can see, I’m forced to match the shape of the output of my overall combinedReducers (https://github.com/kevinold/keystone/commit/6f80c2f6f1e5c081361369a8bb31b75f1e62460f#diff-b4b498ca92c4d05e050b45c725c26f9d) or I will get console warnings, etc.

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

所以我不明白你描述的问题。如果您的 reducer 名称或嵌套发生变化，它也会在服务器上发生变化。您不需要做任何事情来“修复它”——如果您在客户端和服务器上都使用 Redux，它们的状态结构将匹配。

I’d really appreciate some feedback on "best" and "real world" practices that are working for others.

1. 如果您在服务器上使用 Redux，请如上所述预填充存储，并将其状态传递给客户端。在这种情况下，您需要使用 createStore() 的 initialState 参数。

2. 如果您出于某种原因不在服务器上使用 Redux，但您仍想预填充数据(例如，您可能使用 Node 以外的其他东西)，则使用以下方法调度操作是您的下一个最佳选择，因为它不需要您的后端知道状态形状。在这种情况下，您应该将这些操作作为 JSON 传递给客户端，然后 dispatch() 所有这些都在商店创建之后。