React Native Hermes Debugger's console does not seem to be able to trigger sagas

[Nantris]

Steps to reproduce

Open an Expo app using the Hermes engine and dispatch an action like store.dispatch(actions.someAction()) and listen for it with a takeEvery('*', someHandler)

Description of the bug/issue

When dispatching actions from a globally defined store via the Hermes debugger, the actions do not seem to be captured by Redux Saga - no logging occurs in someHandler and breakpoints are not hit - but the values update in the reducers as expected.

I can't conceive of why this would be the case. The context in the console view looks like this:

Same issue occurs with the Flipper debugging tools (which I believe are essentially identical, but I'm not certain)

The code that it uses to setup the debugger appears to be in this file: https://github.com/facebook/flipper/blob/c0cd32564ad4b07a42365af886045095877a6a6b/desktop/plugins/public/hermesdebuggerrn/ChromeDevTools.tsx

Is there anything we could do to work around that?

Steps to reproduce the bug/issue

1. Load a Hermes-based application that uses Redux Saga
2. Trigger an action from the devtools console as described above

Example

None currently, just discovered this issue.

Actual results

Sagas are not triggered

The Expected results

Sagas should be triggered

Environment information

• redux-saga version 1.2.1
• babel / typescript setup 7.17.x
• other related information React Native 0.70.x

[neurosnap]

Greetings! My best guess would be the store attached to the global object doesn't have all the middleware applied to it.

Do dispatches within the app trigger sagas?

Redux middleware encloses the original dispatch to work its magic:
https://github.com/reduxjs/redux/blob/master/src/applyMiddleware.ts#L81

I'd need to see a repo with everything setup to be able to debug further. If you have the time to create a repo setup exactly how you want it to I can take a look!

[Nantris]

Thanks for your reply @neurosnap!

Greetings! My best guess would be the store attached to the global object doesn't have all the middleware applied to it.

I suspect this isn't it, because the code seems like it would preclude that possibility - but maybe I'm overlooking some possibility:

export default (initialState) => {
  const store = {
    ...createStore(
      rootReducer,
      initialState,
      composeEnhancers(
        applyMiddleware(...middleware)
      )
    ),
  };

  sagaMiddleware.run(superRootSaga);

  if (__DEV__) global.store = store; // The store is immediately assigned as a global after creation, and we don't modify the store object again
  return { store };
};

Do dispatches within the app trigger sagas?

Indeed they do!

Redux middleware encloses the original dispatch to work its magic:
https://github.com/reduxjs/redux/blob/master/src/applyMiddleware.ts#L81

Do you have some suspicion that this could cause the issue? We use applyMiddleware is a run of the mill fashion and everything else works as expected, so I can't see a mechanism for this as the cause.

Could it have anything to do with the fact the devtools are loaded in an iframe or webview?

I'd need to see a repo with everything setup to be able to debug further. If you have the time to create a repo setup exactly how you want it to I can take a look!

I'll hopefully be able to create a repro for this in the coming weeks - but currently in crunch time here, so I'll circle back on this.

Thanks again!

[neurosnap]

Circling back, did you ever find a cause for this issue?

[Nantris]

No not yet; I haven't had any more time to revisit this yet.

[neurosnap]

Okay, we have a discord server now if you want to join that where we can triage a little more real-time. https://discord.gg/rySJFkwq