Question

我正在开发一个react（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为/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，然后找到合适的帖子，但这看起来有点脏。人们通常如何构建这样的应用程序？

Answer 1

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

connect

{posts: [{id: 1, title: 'Post 1', contents: '…'}], current_post: {id: 1}}组件将负责使PostsList保持最新状态（即，当用户点击其中一个条目时，会触发一个可以减少current_post的操作新选择的帖子进入redux商店）。 id组件将读取当前帖子的Post，从id数组中提取相关数据并显示它。每次用户更改当前帖子时，所有组件都将被重新渲染，因此整个屏幕将被更新。

Answer 2

我建议通过props.params根据路线加载发布数据，然后使用componentWillReceiveProps检查更新。这样您就可以将当前帖子ID（基于URL）与传入的帖子进行比较，并确定是否需要更新。

将其放入负责解除数据检索操作的任何组件中。

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

保持redux和react-router同步

2 个答案: