React, Redux, React-Router?

Question

The issue of application architecture. Suppose there are many components (look at the image) (network) on the page. What is better to use to switch the main child components (active / inactive)? And the pages (1, 2, 3, further)? Can I use a jet router for both tasks? PS: I use ReactJS for rendering

Answer 1

I would not use a jet router to filter the results. Since you use Redux, you can divide your gearboxes into main sections and keep the state active / inactive, as well as the current page for each section in one store.

Answer 2

I think you do not need to use the interactive router on this page.

You must monitor the status (active / inactive, 1,2,3, the following) using a gearbox, as shown below:

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

And you can get the data that you want to display on this page from the props.

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

Answer 3

The key is used for use. If you have the following use cases:

• User to copy paste the link of the filtered result and page and share with others
• The user will close the page with the filtered result and return to it later.

Then, definitely, I would say to use a router.

You may have this route: <Route path="main/:status/:page" component={Main}/>

Then the params object will be entered as the props for your main component.

If the user presses the buttons, you must use push from the responsive router to change the route or just Link from the responsive router. (instead of using send abbreviated or using this.setState if you saved it as a local state).

I think this is no more complicated than storing it with a reduction or local state, with the added benefit of a larger number of use cases above.

Answer 4

If you need a robust and scalable application architecture, I would suggest using a starter.

A good starter kit wiki will describe the selected design principles.

One of my favorite starter kits that matches headless content is the React Redter starter kit .