React＆Redux应用程序设计

Question

我是Redux的新手，编写了一个拥有全局状态的前端应用程序，该状态在启动时通过Ajax进行检索，然后在获取新数据时通过poll / push进行更新。 在导航到每个url时，有一个actor调度到一个动作，然后该动作调用一个reducer，该viewState用此globalState的过滤视图覆盖viewState对象的一部分。 例如，导航到URL /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']}
     }
}

在此步骤之后，然后通过另一个actor调用ReactDOM.render()并使用viewState的更新值重新呈现所有组件（这不是我的代码，直接来自unicorn入门包）

我想知道a）这是否是构造此类应用程序的明智方法。 b）在应用程序启动时初始化globalState变量然后侦听更新的最佳方法是什么（如果具有该ID的对象当前在viewState则可能会更新viewState ）

Answer 1

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

通常，我认为这是分割全球状态的好策略。 也有一些库可以做到这一点（例如Facebook Relay ），它可以为您提供此功能以及更多现成的功能。

关于初始状态的呈现，我们所做的就是将所有组件设置为很好地处理空数据集，即，如果它们在初始呈现时未接收到任何数据，则仅呈现空div和加载器。 然后，从服务器检索到所有数据后（使用Q库使用BeginRender进行同步），我们将BeginRender操作，该操作将导致所有现在已填充数据的存储区触发change事件。 订阅商店的组件将接收事件，并调用商店方法以检索数据。 一旦他们接收到新数据，组件状态就会更新，并且组件会用数据重新渲染。