Question

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

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

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

**编辑**

正如一位同事指出的那样，使用ComponentWillMount()并不意味着它不再是无状态的。我只是简单地调度动作，状态将在Redux中，而不是在组件本身中。因此，＃1听起来很可行。

Answer 1

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

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

很像为各种跟踪工具设置状态，例如GA，对讲机等。然后您可以使用它在减速机中设置初始状态

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

Answer 2

在index.js之后和createStore之前的ReactDOM.render中，您可以做类似的事情

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的状态。

我只是从一个旧项目中拿走的，不一定是所有这些属性位于本地存储中

服务器的Redux初始状态

2 个答案: