从服务器获取Redux的初始状态

Question

我很好奇如何从服务器管理初始状态。例如，我们有一个按钮，在页面上只有在用户经过授权后才能启用。我看到两个选项，但都有缺点：

1. 在“ComponentWillMount（）”中，从服务器中获取信息。缺点：不再是无状态。 2. 在由“Provider”包装的根对象中获取状态。缺点：状态的存储地可能是杂乱无章的；如果用户没有访问特定页面，则可能永远不需要。

是否有最佳实践方法来获得初始状态？我希望保持我的组件无状态，但如果它们都需要一些初始状态，我不知道如何保持它们无状态。

** 编辑 **

正如同事指出的那样，使用“ComponentWillMount（）”并不意味着它不再是无状态。我只需分派我的操作，状态将在Redux中而不是组件本身中。所以选项＃1听起来是正确的选择。

- Bob Horn

---

保持每个组件无状态的魅力在哪里？此外，使用ComponentWillMount钩子来触发一个初始化应用程序状态的动作，我不会认为这使组件本身具有“有状态性”。特别是如果它驻留在例如<App />中。 - James

并不是一定要让每个组件都保持无状态的“迷恋”。更多的是在尽可能遵循最佳实践。如果我需要某些状态与每个组件相关，那么它们中的任何一个都不会是无状态的。据我所知，无状态的好处是代码更少、测试更简单，没有this绑定。那为什么不试试呢？ - Bob Horn

话虽如此，我想我开始同意你的观点了。与其在一个地方加载15页的初始数据，尤其是当用户不需要大部分数据时，最好拥有带状态的组件。 - Bob Horn

Answer 1

我在单页应用程序中使用的一种技术是将服务器的初始状态嵌入到页面中，例如：

<script>
    window.myAppState = { ... }
</script>

就像为各种跟踪工具（如GA、Intercom等）设置状态一样，您可以使用它来设置reducer中的初始状态。

 const initialState = new AppState(window.myAppState);
 const reducer = (state = initialState, action) => { ... };

- James

---

所以如果我理解正确的话，状态被放置在window对象上，然后reducer使用该状态作为其初始状态？你最初在哪里设置window.myAppState？在SPA的主页面中吗？ - Bob Horn

@BobHorn 是的，在将 HTML 页面发送到客户端之前，您需要在服务器上设置它。 - James

Answer 2

在 createStore 和 ReactDOM.render 之间的 index.js 中，您可以执行以下操作。

if (localStorage.JWT) {
  const payload = decode(localStorage.JWT);
  const user = {
    token: localStorage.JWT,
    email: payload.email,
    confirmed: payload.confirmed
  };
  setAuthorizationHeader(localStorage.JWT);
  store.dispatch(userLoggedIn(user));
}

如果Token有过期日期，您可以与服务器检查该Token，或直接调度任何相关的授权/身份验证函数从服务器获取信息。 另外，根据您的应用逻辑，可以重定向到登录表单，或者呈现例如禁用该按钮的访客路由。或者只是该按钮disable属性取决于redux中的isAuthenticated状态。

• 我只是从旧项目中拿出来的，并不一定所有这些属性都在本地存储中

- Amir-Mousavi

---

谢谢这个。这与我在帖子中列出的选项2非常相似。同样的缺点仍然存在。但我想如果我能保持简单，可能就不会那么糟糕了。 - Bob Horn