javascript - React 和 Redux 应用程序设计

Question

我是 redux 的新手，正在编写一个前端应用程序，该应用程序保存全局状态，该状态在启动时通过 ajax 检索，然后在检索新数据时通过 poll/push 更新。在导航到每个 url 时，有一个 actor 会分派(dispatch)一个操作，然后调用一个缩减器来覆盖 viewState 的一部分。具有此过滤 View 的对象 globalState 。例如导航至网址/items/filter/a将调整viewState到以下内容:

state {
     viewState: {
          items: [{id: 1, value: 'a'}]
     }
     globalState: {
          items: [{id: 1, value: 'a'}, 
                  {id: 2, value: 'b'}, 
                  {id: 3, value: 'c']}
     }
}

完成此步骤后 ReactDOM.render()通过另一个参与者调用，所有组件都使用 viewState 中的更新值重新渲染。 (这不是我的代码，它直接来自独 Angular 兽入门包)

我想知道 a) 这是否是构建此类应用程序的明智方法。 b) 初始化 globalState 的最佳方式是什么？应用程序启动时的变量，然后监听更新(如果具有该 id 的对象当前位于 viewState 中，则可能会更新 viewState )

Answer 1

我没有使用 Redux 的经验，因为我们在项目中使用了普通 Flux，但我们有类似的场景，我们的解决方案可能也适合您的场景。

总的来说，我认为这是分割全局状态的一个很好的策略。还有一些库可以执行此操作(例如 Facebook Relay)，它们可能会为您提供此功能以及更多开箱即用的功能。

关于初始状态的渲染，我们所做的是将所有组件设置为能够很好地处理空数据集，即，如果它们没有接收到数据(在初始渲染时)，它们只会渲染空的 div 和一个装载机。然后，当从服务器检索到所有数据时(我们使用 Q 库使用 Promise 进行同步)，我们触发一个 BeginRender 操作，这会导致所有现在填充了数据的存储触发一个改变事件。订阅存储的组件接收事件并调用存储方法来检索数据。一旦它们收到新数据，组件状态就会更新，并且组件会使用数据重新渲染。