React、Redux、React-Router？答案

【问题标题】：React, Redux, React-Router?React、Redux、React-Router？
【发布时间】：2016-11-02 18:31:52
【问题描述】：

应用架构的问题。假设一个页面上有很多组件(look at the picture) (mains)。切换主要子组件（活动/不活动）有什么更好的用途？和页面（1、2、3、下一个）？我可以将 react-router 用于这两个任务吗？ P.S.：我使用 ReactJS 进行渲染

【问题讨论】：

取决于：每个子组件在活动时是否应该具有唯一的 url？如果是，那么 React Router 可以轻而易举地做你想做的事。如果不是，那么最好使用父组件中的状态来决定要渲染哪个子组件。
有趣的是，我以为你在变形一个拉丁动词。 /OT

【解决方案1】：

我不会使用 react-router 来过滤结果。由于您使用的是 Redux，因此您可以将 reducer 拆分为主要部分，并在一个商店中保持活动/非活动状态以及每个部分的当前页面。

【讨论】：

【解决方案2】：

我认为你不应该在这个页面中使用 react-router。

你应该通过reducer控制状态（活动/不活动，1,2,3,next），如下所示：

case NEXT_PAGE:
     return {...state, list:[{active:0, ...others},{active:1, ...others},...], page: 1};

并且你可以从props中获取你想要在这个页面上展示的数据。

mapStateToProps(state) {
   return {
        list: state.xxx.list,
        currentPage: state.xxx.page
        totalPage: state.xxx.total
   }
}

【讨论】：

【解决方案3】：

关键是用例。如果您有以下用例：

那么我肯定会说使用反应路由器。

你可以有这样的路线： <Route path="main/:status/:page" component={Main}/>

然后 params 对象将作为道具注入到您的 Main 组件中。

如果用户单击按钮，您将使用 react-router 中的 push 更改路由，或者使用 react 路由器中的简单 Link。（而不是使用带有 redux 的调度操作或使用 this.setState 如果您存储为本地状态）。

我认为这并不比将它与 redux 或本地状态一起存储更困难，并且具有上述更多用例的额外优势。

【讨论】：

【解决方案4】：

如果您想要一个可靠且可扩展的应用程序架构，我建议您使用 starterkit。

一个好的入门工具包的 wiki 将描述所选的设计原则。

我最喜欢与无头后端结合使用的入门工具包之一是React Redux starter kit。

【讨论】：

【解决方案5】：

所以你想用你的 Redux 应用做路由。您可以将其与react-router-dom 一起使用。 react-redux 将成为您数据的真实来源，react-router-dom 将成为您 URL 的真实来源。

使用react-redux（创建操作、reducers ...）使用state management 处理数据，使用react-router-dom 进行导航。

【讨论】：