React 和 Redux 应用程序设计

Question

我是 redux 的新手，我正在编写一个前端应用程序，该应用程序包含一个全局状态，该状态在启动时通过 ajax 检索，然后在检索到新数据时通过 poll/push 进行更新。在导航到每个 url 时，有一个 actor 分派到一个 action，然后调用一个 reducer，用这个 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']}
     }
}

在这一步之后，ReactDOM.render() 被另一个参与者调用，所有组件都使用viewState 中的更新值重新渲染（这不是我的代码，它直接来自独角兽启动包）

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

Answer 1

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

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

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