保持 redux 和 react-router 同步

Question

我正在开发一个反应（0.14）+ redux（3.3）+ react-redux（4.4）+ react-router （2.0）应用程序，其中包含三个组件：PostsLists是博客文章标题的列表，Post显示博客文章和包装这些组件的Blog：

             ┌──────────────────────────────────────────────┐
             │                                              │
             │ ┌─────────────┐┌──────────────────────────┐  │
             │ │             ││                          │  │
             │ │  Post 1     ││ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐  │  │
             │ │  Post 2     ││       Post title         │  │
             │ │  Post 3     ││ └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘  │  │
             │ │             ││                          │  │
             │ │             ││ ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐  │  │
             │ │             ││                          │  │
             │ │             ││ │                     │  │  │
             │ │             ││      Post contents       │  │
             │ │             ││ │                     │  │  │
             │ │             ││                          │  │
             │ │             ││ │                     │  │  │
             │ │             ││  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─   │  │
             │ │  PostsList  ││          Post            │  │
             │ └─────────────┘└──────────────────────────┘  │
             │                                              │
             │                     Blog                     │
             └──────────────────────────────────────────────┘

到目前为止，我的 redux 状态只是一系列博客文章：

{posts: [{title: 'Post 1', contents: '…'}]}

路线是

/posts
/posts/:id

在/posts仅显示PostLists，而在/posts/:id Post上也显示（它将是Blog的孩子）。帖子列表Link s 到 /posts/:id .

Blog 将在挂载时从 HTTP API 获取博客文章，因此如果加载例如 /posts/1 Post可以在显示柱子之前安装。

我的问题是关于管理当前活动帖子。我最初的想法 - 我仍然很喜欢 - 是在该州有一个current_post领域：

    {posts: [{title: 'Post 1', contents: '…'}],
     current_post: {title: 'Post 1', contents: '…'}}

但是，当例如加载/posts/1时，谁应该负责更新current_post（以确保Post在更改时重新加载）？如果Post是一个容器，而我使用mapStateToProps来current_post，那么当current_post被更改时，它会重新渲染吗？

另一种选择是在Post中检查props.params.id，然后找到正确的帖子，但这似乎有点脏。人们通常如何构建这样的应用程序？

Answer 1

对于这样的应用程序，我将按如下方式构建 redux 存储：

{posts: [{id: 1, title: 'Post 1', contents: '…'}],
 current_post: {id: 1}}

PostsList组件将负责使current_post保持最新（即，当用户单击其中一个条目时，将触发一个操作，以减少新选择的帖子在 redux 存储中的id）。Post组件将读取当前帖子的id，从posts数组中提取相关数据并显示它。每次用户更改当前帖子时，所有组件都将重新渲染，从而更新整个屏幕。

Answer 2

我建议通过 props.params 根据路由加载帖子数据，然后使用 componentWillReceiveProps 检查更新。这将允许您将当前帖子 ID（基于 URL）与传入帖子进行比较，并决定是否需要更新任何内容。

将其放入负责触发数据检索操作的组件中。

您也可以将此信息存储在您的商店中，但我不确定您会获得多少收益。如果您希望能够管理商店中的导航状态，我建议您 https://www.npmjs.com/package/redux-react-router