来自服务器的 Redux 初始状态答案

【问题标题】：Redux Initial State from Server来自服务器的 Redux 初始状态
【发布时间】：2019-10-02 18:25:45
【问题描述】：

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

在ComponentWillMount() 中，从服务器获取信息。缺点：不再是无国籍的。
在由Provider 包裹的根对象中，在那里获取状态。缺点：国家的倾倒场；如果用户不访问特定页面，则可能永远不需要。

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

** 编辑 **

正如一位同事指出的，使用ComponentWillMount() 并不意味着它不再是无状态的。我只需调度我的操作，状态将在 Redux 中，而不是在组件本身中。所以#1 听起来像是要走的路。

【问题讨论】：

保持每个组件无状态的魅力是什么？此外，使用ComponentWillMount 挂钩来触发初始化 应用程序状态的操作，我不一定会考虑使组件本身“有状态”。特别是如果它位于 <App /> 中。
保持每个组件无状态不一定是魅力。这更像是尽可能地遵循最佳实践。如果我需要每个组件的某种状态，那么 none 将是无状态的。据我所知，无状态的好处是代码更少，测试更简单，并且没有this 绑定。那为什么不试试呢？
话虽如此，我想我开始同意你的看法了。拥有带状态的组件可能比在一个地方加载 15 页的初始数据要好，尤其是当用户不需要大部分数据时。

标签： reactjs redux react-redux

【解决方案1】：

我在 SPA 中使用的一种技术是将初始状态从服务器嵌入到页面中，例如

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

类似于为各种跟踪工具设置的状态，例如GA、Intercom 等。然后您可以使用它在减速器中设置初始状态

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

【讨论】：

所以如果我理解正确的话，状态被放在window 对象上，那么reducer 使用那个状态作为它的初始状态？你最初在哪里设置window.myAppState？在 SPA 的主页上？
@BobHorn 是的，你可以在发送 HTML 页面之前在服务器上设置它。

【解决方案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));
}

您可以与服务器检查该令牌是否具有到期日期，或者直接调度任何从服务器获取某些内容的相关授权/身份验证函数。或者，根据您的应用程序逻辑，可以重定向到登录表单，或呈现例如禁用该按钮的访客路由。或者只是那个按钮 disable 属性取决于 redux 中的 isAuthenticated 状态。

我只是从一个旧项目中获取的，不一定所有这些属性在本地存储中

【讨论】：

谢谢。这与我在帖子中列出的选项 2 非常吻合。同样的缺点在这里仍然适用。但我想如果我能保持轻松，它可能不会那么糟糕。