Reactotron: wiring up to Redux

Created on 12 Mar 2017 · 7Comments · Source: infinitered/reactotron

hi there, thanks again for this super handy tool ! In a React Native app I'd like to wire it up to Redux but need some guidance. I'm using the ex-Navigation lib too and my store setup looks like this:

const createStoreWithNavigation = createNavigationEnabledStore({
  createStore,
  navigationStateKey: 'navigation',
});

const store =
   createStoreWithNavigation(
      cleverbeanReducers,
      {},
      applyMiddleware(reduxThunk)
   );

I tried Reactotron.createStore, in the above but that didnt work. Appreciate any help you can lend on this, thanks.

question

Source

ajonno

All 7 comments

When you say it didn't work - what happened? I assume when you say you used Reactotron.createStore you mean you replaced it on line 2 of your example.

rmevans9 on 12 Mar 2017

sorry - it's "mr cart before the horse" here. i just saw the doco on wiring up Redux.

so i did that setup :-0

here is config:

import Reactotron from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';

Reactotron
  .configure({ name: 'Cleverbean' }) // we can use plugins here -- more on this later
  .use(reactotronRedux())
  .connect() // let's connect!

here is the store setup:

import { createNavigationEnabledStore, NavigationReducer } from '@exponent/ex-navigation';
import { compose, createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import cleverbeanReducers from '../reducers';
import Reactotron from 'reactotron-react-native';

const createStoreWithNavigation = createNavigationEnabledStore({
  Reactotron.createStore,
  navigationStateKey: 'navigation',
});

const store =
   createStoreWithNavigation(
      cleverbeanReducers,
      {},
      applyMiddleware(reduxThunk)
   );

export default store;

i obviously can't invoke/include this way as it just throws a syntax error.

should i be applying / including Reactotron via the createStoreWithNavigation(.. ?

apologies for this I'm just not up to speed with the Redux setup patterns also.

ajonno on 12 Mar 2017

i think this might do it, testing it out now:

import { createNavigationEnabledStore, NavigationReducer } from '@exponent/ex-navigation';
import { compose, createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import cleverbeanReducers from '../reducers';
import Reactotron from 'reactotron-react-native';

let storeCreator;
storeCreator = Reactotron.createStore;
const middleware = applyMiddleware(reduxThunk);
const createStoreWithMiddleware = middleware(storeCreator);
const createStoreWithNavigation = createNavigationEnabledStore({
  createStore: createStoreWithMiddleware,
  navigationStateKey: 'navigation',
});

const store =
   createStoreWithNavigation(
      cleverbeanReducers,
      {},
      //applyMiddleware([reduxThunk, Reactotron])
   );

export default store;

ajonno on 13 Mar 2017

I'm not familiar with ex-navigation unfortunately. I can tell you though, I've had issues with multiple stores. There's one drawback with redux middleware. It's pretty picky about the order of things.

Another option you have if you want to do things manually to play nicely with ExNavigation is to something like this:

const newRootReducer = Reactotron.createReplacementReducer(cleverbeanReducers)
const enhancers = compose(applyMiddleware([reduxThunk]), Reactotron.createActionTracker())

const store = createStoreWithNavigation(newRootReducer, {}, enhancers)
Reactotron.setReduxStore(store)

These are the things we're doing in our createStore().

Also you to dodge issues like this where two libraries are battling for supremacy for the store.