React, Redux, React-Router?

Question

The question of the application architecture. Suppose there are a lot of components (look at the picture) (mains) on a page. What better use to switch the main children's components (active / not active)? And pages (1, 2, 3, next)? Can I use react-router for both tasks? P.S.: I use ReactJS for rendering

Depends: should each child component have a unique url when it is active? If yes, then React Router can trivially do what you want. If no, then better to use state in the parent component to decide on which child to render. — Matthew Herbst, Nov 02 '16 at 18:49
Funny thing is, I though you were inflecting a latin verb. /OT — Patrick Trentin, Feb 03 '17 at 22:52

score 1 · Answer 1 · answered Nov 02 '16 at 18:52

1

I would not use react-router for results filtering. Since you are using Redux, you can split your reducers in to main sections and keep the state of active/not active as well as current page per section all in one store.

answered Nov 02 '16 at 18:52

Eric Kambestad

139
6

score 0 · Answer 2 · answered Jan 05 '17 at 05:09

I think you should not need use react-router in this page.

You should control the state (active/not active,1,2,3,next) by reducer,just like 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 props.

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

score 0 · Answer 3 · answered Feb 03 '17 at 22:49

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

A user to copy paste the link of filtered result and page and share with others
A user a bookmark a filtered result page, and come back to it later.

Then definitely I would say use the react router.

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

Then the params object would be injected as props to your Main component.

If user click on the buttons, you would use the push from react-router to change the route or the simply Link from react router. (instead of using dispatch action with redux or using this.setState if you stored as local state).

I think it isn't more difficult than storing it with the redux or local state, with the additional advantage of more use cases above.

score 0 · Answer 4 · answered Jul 17 '17 at 14:43

If you want a solid and scalable application architecture I'd suggest using a starterkit.

The wiki of a good starter kit will describe the chosen design principles.

One of my favourite starter kits to combine with a headless backend is React Redux starter kit.

score 0 · Answer 5 · answered Jul 31 '19 at 10:19

So you want to do routing with your Redux app. You can use it with react-router-dom. react-redux will be the source of truth for your data and react-router-dom will be the source of truth for your URL.

Handle data with state management using react-redux (create actions, reducers ...) and navigation with react-router-dom.

Usage with React Router

React, Redux, React-Router?

5 Answers5