React，Redux，React-Router？

Question

应用程序架构的问题。假设一个页面上有许多组件(look at the picture) (主线)。如何更好地切换主要的子组件(活动/非活动)？和页面(1，2，3，下一页)？我可以使用react-router来完成这两个任务吗？附言:我使用ReactJS进行渲染

Answer 1

我不会使用react-router进行结果过滤。由于你使用的是Redux，你可以将你的reducers分成几个主要部分，并将活动/非活动状态以及每个部分的当前页面都保存在一个存储中。

Answer 2

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

你应该通过reducer来控制状态(active/not active,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
   }
}

Answer 3

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

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

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

您可以使用这样的路由：<Route path="main/:status/:page" component={Main}/>

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

如果用户单击这些按钮，您将使用来自react-router的push或简单的来自react路由器的Link来更改路由。(如果存储为本地状态，则不使用带redux的分派操作或使用this.setState )。

我认为这并不比用redux或local state存储它更难，还有一个额外的优势就是上面的用例更多。