React，Redux，React-Router？

Question

应用程序架构的问题。 假设页面上有很多组件(look at the picture)（主电源）。 切换主要儿童组件（活动/非活动）有什么用？ 和页面（1,2,3，下一个）？ 我可以将react-router用于这两项任务吗？ P.S。：我使用ReactJS进行渲染

Answer 1

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

Answer 2

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

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

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

您可以从道具中获取要在此页面上显示的数据。

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

Answer 3

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

1. 要复制的用户粘贴已过滤结果和网页的链接并与他人共享
2. 用户将书签作为过滤结果页面，稍后再返回。

然后我肯定会说使用react路由器。

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

然后params对象将作为道具注入主要组件。

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

我认为使用redux或local状态存储它并不困难，还有上面更多用例的额外优势。

Answer 4

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

优秀入门套件的维基将描述所选择的设计原则。

我最喜欢的与无头后端结合的入门套件之一是React Redux starter kit。

Answer 5

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

使用state management处理react-redux的数据（创建动作，归约器...）并使用react-router-dom导航。

Usage with React Router