Reactotron: Multiple clients on reloading the app

[ruskid]

Every time i reload the app on android device I see +1 client connected to reactotron.

Also yield put(Actions.requestFacebookTokenCancelled()) are not shown in reacotron console.

v1.1.2

[skellock]

re: connection: Yes, that will establish a new connection. I have a feeling you don't want that. Can you give me a sense of what you'd expect?

re: saga: Oh? That's not right. Does it that PUT actually ever complete successfully? If it does, it should absolutely log.

[ruskid]

Hm.. Maybe on reload I expect to disconnect from the last connection and establish the new one, maintaining total 1 clients online. Every time I reload I see 2,3,4,5+ clients online. this is just weird.

Regarding the PUT, it worked before the update. If we take LoginSaga as an example, I see LOGIN_REQUEST on console, but neither LOGIN_FAILURE, LOGIN_SUCCESS are shown.

[skellock]

Agreed. I'll have to try to reproduce the lingering connections. That's not right at all.

I'll have a closer look at what you're saying for the Sagas too. That too is not right.

Double bug day!

[skellock]

Sorry, one more thing... this was in the CLI right?

[ruskid]

Yes, it's CLI

[zalmoxisus]

Also yield put(Actions.requestFacebookTokenCancelled()) are not shown in reacotron console.

Not sure it's the reason, but keeping reactotron's enhancer first in the compose (before the applyMiddleware) should help, otherwise the store object is different there and is not aware of middlewares.

[skellock]

Great point @zalmoxisus . It should go first into the enhancer list. (or at least before sagamiddleware).

I wonder if this is because of something strange I'm doing in my enhancer. I'll take another look shortly. I'll admit, the middleware/enhancer chaining stuff bends my brain.

[ywongweb]

Had the same problem with actions triggered by saga's yield put() doesn't show up in Reactotron. Manage to fix it by placing reactotronEnhancer _after_ applyMiddleware(sagaMiddleware).

function configureStore(initialState) {
  const enhancer = compose(
    // doesn't work if reactotronEnhancer is placed here
    applyMiddleware(sagaMiddleware),
    reactotronEnhancer,
  );

[skellock]

Thanks @ywongweb. I'll have to have a closer look at the source code for Redux to see exactly what's going on here. I feel like there's two ways to do it and they're both wrong. Ha! Probably something silly I'm doing in my code.

[ruskid]

As a temp fix, thanks @ywongweb

[skellock]

Problem now, is you might not be able to dispatch from Reactotron. 🐔 🍳

[zalmoxisus]

@skellock, you're not doing anything silly. It's a known problem for Redux store enhancers that is fixed by https://github.com/reactjs/redux/pull/1702, and will be shipped in v4, but unfortunately it's not expected soon, unless someone can help Dan with that.

There are two possible workarounds: to have 2 enhancers (one at the beginning and another one at the end of the compose), or to have an additional method to pass the store as we do for Redux Extension.

However, I guess you could avoid these problems by using a middleware instead of a store enhancer, which should be enough for you case (for the extension we're using the enhancer as 'redux-devtools-instrument' needs to change the way redux api works).

[skellock]

I like your updateStore concession @zalmoxisus. There is a bunch of great discussions in that issue. I guess it isn't a high priority then.

You're right, the store enhancer is kind of overkill for what I'm doing right now. Perhaps adding similar workarounds like you did, switching to middleware, plus a few deprecation warnings is the way out for now.

Thank you again Mihail for your guidance. 💯

[skellock]

Parts of this are fixed. Multiple clients will be on the roadmap for the future, but not in 2.x. Thx all!

[ankitsehgal94]

@skellock How can I get over the issue of multiple devices on every reload.

[filipef101]

@ankitsehgal94 https://github.com/infinitered/reactotron/issues/770#issuecomment-522484091
If you are not in rectotron-react-native v4 you might need to upgrade (just upgrade package)
(note in my case I imported asyncstorage from react-native)