2

我正在开发一个 react (0.14) + redux (3.3) + react-redux (4.4) + react-router (2.0) 应用程序，它包含三个PostsLists组件：包装这些组件：PostBlog

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

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

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

路线是

/posts
/posts/:id

/posts仅显示at PostLists，同时显示 on /posts/:id Post（它将是 的子级Blog）。帖子列表Links to /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

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

4

2 回答 2

1

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

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

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

于 2016-03-10T18:57:06.650 回答
1

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

将它放在负责触发数据检索操作的任何组件中。

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

于 2016-03-11T05:52:33.980 回答