在 React+Redux 中加载静态常量答案

【问题标题】：Loading static constants in React+Redux在 React+Redux 中加载静态常量
【发布时间】：2017-07-21 00:33:09
【问题描述】：

我正在为我的 React-Redux 应用程序使用服务器端渲染。我希望在应用程序启动时加载一些常量，例如具有相应 ID 的城市列表：

[ 
  {
      name: "London",
      id: 1
  }
  ...
]

我认为最好将这些数据放入服务器端的store 并使用window.__INITIAL_STATE__ 将其提供给客户端，如此处建议的http://redux.js.org/docs/recipes/ServerRendering.html

这个常量是只读的，我想预加载它们只是为了数据规范化的目的。例如，稍后我可以只检索具有城市 ID 的用户列表，而不是具有城市名称的用户：{name: "Alex", cities: [1,2]}

问题是，如果我将它们放入存储中，那么我会强制为此常量创建 reducer，否则我会收到此错误：

在传递给的 preloadedState 参数中发现意外的键“城市” 创建商店。预计会找到一个已知的 reducer 键： “颜色”。意外的键将被忽略。

所以我正在寻找一些优雅的方法来处理这种情况。

目前我有 2 个想法来处理它：

创建始终返回默认状态的空减速器

export const cities = (state = [], action={ type: null }) => {
    return state
}

Send from server initial actions with payloads, and execute them on client at startup：

// server.js
window.INITIAL_ACTIONS = [
  { type: "REQUEST_LOGIN_SUCCESS", user: {userId, userName, userEmail, etc} },
  { type: "REQUEST_CITIES_SUCCESS", [..listOfCities] },
]

在我的client-index.js 中，在创建商店后立即调度这些操作：

//client-index.js
window.INITIAL_ACTIONS.forEach(store.dispatch)

那么，我的一种方法是好的吗？或者您是否知道其他更优雅的解决方案？

谢谢。

【问题讨论】：

为什么应用程序常量需要在存储中？只需将它们保留在窗口对象上即可。
@DannyDelott 那是一个非常大的臭不，不。
为什么？在通用 React 应用程序中，整个状态都落在窗口对象上。

标签： reactjs redux server-side-rendering

【解决方案1】：

我们用一个虚拟的“设置”减速器做类似的事情。即

const rootReducer = combineReducers({
  ...
  settings: (state = {}) => state,
  ...
});

这为我们提供了一个方便的地方来存储我们所有的应用配置。

只需确保以相同的方式键入初始状态即可。即

window.__INITIAL_STATE__ = {
  ...
  settings: { ... },
  ...
};

有些人可能会反对这种做法，但我认为这是合理的。尽管settings 可能是不变的，但它仍然是状态。它符合单一状态对象的 redux 做法。（此外，未来可能会出现设置状态切片是动态的并且需要“真正的”reducer。）

【讨论】：