Redux:处理多个路由之间的状态

时间:2016-01-14 20:57:47

标签: reactjs react-router redux

我不得不说这是管理您的应用程序状态的好方法。但我有几个问题似乎无法在互联网上的任何地方找到答案。

跨多条路线处理您的州,意思是:

我有我的状态,看起来像这样:

{
    user: {},
    routing: {}
}

我有几个不同的页面,这意味着它添加了(例如)todos,这只在/todo路线中很重要。这是怎么回事?或者我甚至不在redux中包含它。我以为我可以为每条路线添加一个对象,但这很快就会变得混乱。除非这是建议的路线?

我正在寻找正确的" redux"回答这个问题。我不会在Redux中包含这些值,或者我是否只为每条路径创建并且只是在我去的时候嵌套值?在这一点上任何事情都是有帮助的,因为我已经没有了这个想法。

谢谢大家!

编辑!

只是回复评论中发生的事情。这就是我的状态:

{
  "routing": {
    "changeId": 1,
    "path": "/",
    "state": null,
    "replace": false
  },
  "todos": {
    "visibilityFilter": "SHOW_ALL",
    "todos": [
      {
        "text": "Use Redux - This is the initial state.",
        "completed": false,
        "id": 0
      }
    ]
  },
  "requests": {
    "isFetching": false,
    "data": {}
  }
}

几乎直接从redux拉出来,路由对象来自react-router所以这让我相信我并不真的需要这个。但我只想弄清楚如何保持清洁以及如何为一个巨大的应用程序构建我的动作/减少器。

1 个答案:

答案 0 :(得分:4)

redux的美妙之处在于减速器的可组合性。这意味着您可以在其中存储各种信息,同时完全独立地处理它们。这里有一些过于简单和通用的建议。

  1. 将所有应用状态存储在Redux中。这意味着todos属性可能存在,而不是在需要它的路径上(但可能没有填充)。

  2. 数据中解耦路由。路由是将一堆视图元素捆绑在一起的方法。这些视图元素可以反过来具有数据要求,但它们独立于它们出现的任何路径(或路径!)。您的商店应具有代表您的商家域的形状。

  3. 如果您的应用程序有各种实体,如待办事项,日历条目和聊天消息,那么您的"模型"可能看起来像这样:

    todos:
      todo1:
        name: String
        completed: boolean
      ...
    threads:
      thread1:
        participants: [ ... ]
        messages: [ ... ]
      ...
    events:
      event:
        date: Date
        todos: [ 'todo1', 'todo2' ]
      ...
    users:
      ...
    ...
    

    我们可能会有一个" todos"我们关注todos的路线,但这只是我们的一些域数据的表示。 TodoList组件需要数据并连接到商店以获得所需内容。它出现的路径可能会触发请求数据的操作 - 或者它可能完全来自其他地方。浏览到不同的路由会再次启动该过程,但仅适用于所需的任何数据。

    1. 在商店中缓存数据。如果用户从路由A单击到路由B然后再返回,则可能不需要重新获取所有数据的服务器调用。缓存失效超出了本文的范围。