React-native-router-flux: No hard dependencies on mobx

[RWOverdijk]

Regarding V4

Currently, MobX is a hard dependency on the library. For those not using MobX (me being one of those people) that's not something that's wanted.

Proposal

It's a small proposal, because I haven't worked out the specifics yet. But basically:

• Remove MobX as a dependency
• Document "engines" to use
• User is responsible for including dependency in the project
• User tells RNRF what engine to use (for the specific methods)

This could look something like:

import {ENGINE_MOBX} from 'react-native-router-flux'

<Router engine={ENGINE_MOBX} />

This would tag in MobX behavior here:

• https://github.com/aksonov/react-native-router-flux/blob/master/src/navigationStore.js
• https://github.com/aksonov/react-native-router-flux/blob/master/src/Router.js

Thanks to @rmevans9 and @skellock for sharing this opinion and figuring out where MobX lives in the project.

[skellock]

I'm team-mobx and I still want this for my redux compatriots. Lemme know if I can help at all.

[aksonov]

Okey, any idea how to implement Router/navigationStore without mobx ?

[rmevans9]

Hey @aksonov!

We are still working out those details but after looking through the code it doesn't seem like an unattainable goal. @skellock @RWOverdijk and I will be working through a few of the options we have talked about in the next few days.

[rmevans9]

Hey @aksonov - I have gotten some work done on playing around with the proposal that @RWOverdijk suggested. I haven't opened a PR on this repo yet as there is a looottt of cleanup to do in addition to getting a good example of the ReduxEngine in place. I created a PR on my fork of this repo so @skellock and @RWOverdijk could see/contribute to our proposed solution. In the mean time please feel free to take a look at the direction it is heading:

https://github.com/rmevans9/react-native-router-flux/pull/1

The current state of it is - it works! I was easily able to pull MobX out of Router and navigationStore while still providing access back into them so navigation still works. I also built out a ReduxEngine that also works but requires a little bit more setup then the MobX one. I personally think I can improve the API that it is currently using to make the setup a little bit better on the redux side.

I want to play with a few more thoughts I have on this code before opening a PR here. The one big thing I want to try and figure out is making this not be a breaking change. As it stands if this were to be merged everyone would need to suddenly pull in either MobXEngine or ReduxEngine and pass it to Router. The hangup I have with just defaulting to MobXEngine is that might make the RN packager not optimize out MobX which means your bundle would get bloated with it even if you do pass in a custom engine. One option is make react-native-router-flux state more like how they handle it internally in react-navigation and only use a local component state unless you specifically pass a dispatch and state object. That route might take a lot more refactoring of navigationState but might be worth it.

[rmevans9]

I worked a bit more on this and I think I am close. Here is a quick summary of updates:

• On the redux side I broke down and built an middleware to handle the additional dispatches that react-native-router-flux does. The wire up of it is simple enough and if someone is using redux they likely already have a middleware in place.
• I couldn't find a good way to default out the MobXEngine but noted you have v4 in beta so I am hoping that I might convince you a breaking change for it isn't such a bad idea.
• I have done a bit more testing and so far haven't found any issues with either the MobXEngine or the ReduxEngine thus far. I am happy with them both at this point.
• There is code in navigationStore that could likely be removed with this change but I didn't want to pollute this PR too much so I will likely follow up later with another PR.

Here is an example for an end user to wire up the MobXEngine (basically to get the functionality of today) - NOTE: I am omitting unchanged things which is pretty much everything...

import MobXEngine from "react-native-router-flux/dist/Engines/MobXEngine";
{...}
<Router engine={MobXEngine} {...}>

Here is an example for an end user to wire up the ReduxEngine:

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import ReduxEngine, { navReducer, navMiddleware } from "react-native-router-flux/dist/Engines/ReduxEngine";

{...}

const store = createStore(combineReducers({
  nav: navReducer,
}), applyMiddleware(
  navMiddleware,
));

{...}
<Provider store={store}>
  <Router engine={ReduxEngine(store)} {...}
{...}

Obviously the redux one is slightly more involved but as an avid redux user myself this does not seem unreasonable. I could make ReduxEngine take in store.dispatch if that helps put any minds more at ease with this change.

I plan to open a PR against this repo likely tomorrow.

[aksonov]

Mobx is removed now