How to connect MobX with a react-router?

just blogged: how to use #mobx with #reactrouter -   #reactjs #javascript

  • Thanks to the Provider component we can pass the stores object to all the child components.
  • Even if the ChildComponent component has its own children, it shouldn’t pass the whole store into them.
  • In the post about Redux I told you about the connect function and the Provider component.
  • Redux’s connect function and Provider component
  • The way, the React component attached to the route has the store available.

The second article about MobX. This time I will show you two ways of how to connect MobX with a react-router: the Redux way and by importing stores.

@burczu: just blogged: how to use #mobx with #reactrouter – #reactjs #javascript

My last blog post about the introduction to MobX was very popular on social media so I think the MobX topic must be very interesting for many of you. I did some research and noticed that many people are confused about how to connect MobX with a react-router… That’s why I decided to demystify it for you.

Don’t worry, it’s easy!

component. Let’s take a look at a part of that example again:

import { createStore } from ‘redux’; import { connect, Provider } from ‘react-redux’; const store = createStore(…); … // the rest of the example in the post about Redux const mapStateToProps = (state) => { return { counter: state.counter }; }; const mapDispatchToProps = (dispatch) => { return { onIncrement: () => dispatch({ type: ‘INCREMENT’ }), onDecrement: () => dispatch({ type: ‘DECREMENT’ }) } }; Counter = connect(mapStateToProps, mapDispatchToProps)(Counter); render( , document.getElementById(‘root’) );

Please bear in mind that this is only a part of the full example. If you want, see the full example in the mentioned article.

function calls.

If we talk about a react-router used in the React + Redux application, we normally have to do the same with the routes configuration:

ReactDOM.render( , document.getElementById(‘app’) );

This way, the React component attached to the route has the store available.

component… This is its description in the library documentation:

component we can pass the stores object to all the child components. That’s why this part will be very similar to the Redux one:

component using the spread operator. This is equivalent of this:

decorator. This is its definition:

decorator in the component:

in this particular component.

decorator “outer”.

component:

ReactDOM.render( document.getElementById(‘app’) );

Then you will have to import your stores in the container component:

component has its own children, it shouldn’t pass the whole store into them.

These were two approaches for using MobX with a react-router. I hope they will be helpful to some of you. The first one is kinda similar to the way we deal with Redux and a react-router. But… I don’t think the second one is bad. Everything depends on your needs and preference.

How to connect MobX with a react-router?