infinitered / reactotron

A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
https://docs.infinite.red/reactotron/
MIT License
14.81k stars 941 forks source link

Unable to enter direct reducer paths when using ImmutableJS #1151

Open 4lph4-Ph4un opened 5 years ago

4lph4-Ph4un commented 5 years ago

Hi! I've had a bit of a break from using Reactotron (and React Native in general) and decided to come back to it, this time integrating ImmutableJS into the chain. Currently I've stumbled into a bit of a hiccup.

It seems to me that Reactotron connects OK and I can view actions that I've dispatched. However when I try to inspect the state from Reactotron I cannot find it by typing the path. Infact the only way to view any store states is via passing "*" when adding the subscription. Here's a screencap of the issue, where the topmost log is achieved with "*":

foobar

I don't recall that the stores would be under a value from before? Has this changed, an issue or have I simply forgotten? (Edit: I've always viewed different reducers directly so just got a bit confused there - sorry).

Here's the code for minimal reproduction:

initializing reducer

import { fromJS } from "immutable";
import { combineReducers } from "redux-immutable";

const INITIAL_FOO = fromJS({
  a: 1,
  b: 2
});

const INITIAL_BAR = fromJS({
  c: 3,
  d: 4
});

export default combineReducers({
  foo: (state = INITIAL_FOO, action) => state,
  bar: (state = INITIAL_BAR, action) => state
});

export const INITIAL_STATE = {
  foo: INITIAL_FOO,
  bar: INITIAL_BAR
};

configuring Reactotron:

import Reactotron from "reactotron-react-native";
import { reactotronRedux } from "reactotron-redux";
import sagaPlugin from  "reactotron-redux-saga";
import { fromJS } from "immutable";
import { name as appName } from '../../app.json';

const reactotron = Reactotron.configure()
  .useReactNative({ name: appName })
  .use(reactotronRedux())
  .use(sagaPlugin())
  .connect();

console.tron = reactotron;

reactotron.clear();

export default reactotron;

Configuring the store (removing the saga from the equation has no effect):

import { createStore, compose, applyMiddleware } from "redux";
import createSagaMiddleware from "redux-saga";
import rootReducer from "../reducers";
import rootSaga from "../sagas";

const Debugger = __DEV__ ? require('../helpers/debugger').default : null;

export default initialState => {
  const sagaMonitor = Debugger ? Debugger.createSagaMonitor() : null;
  const sagaMiddleware = createSagaMiddleware({ sagaMonitor });
  const store = createStore(
    rootReducer,
    initialState,
    compose(
      applyMiddleware(sagaMiddleware),
      Debugger ? Debugger.createEnhancer() : undefined));
  sagaMiddleware.run(rootSaga);

  return store;
};

Versions for the notable libraries:

    "immutable": "^4.0.0-rc.12",
    "react": "^16.10.2",
    "react-native": "^0.61.2",
    "react-redux": "^7.1.1",
    "redux": "^4.0.4",
    "redux-immutable": "^4.0.0",
    "redux-saga": "^1.0.5",
    "reactotron-react-native": "^4.0.2",
    "reactotron-redux": "^3.1.2",
    "reactotron-redux-saga": "^4.2.2",

Running on Windows 10.

4lph4-Ph4un commented 4 years ago

Anything? Let me know if you need better reproduction info.

4lph4-Ph4un commented 4 years ago

Is anyone else experiencing this? I know this is not a bug that totally breaks the use for ImmutableJS users, but since direct paths seem to work in other cases, it would be nice to know if this is intended to be fixed? I totally get if there's more pressing issues that need to be addressed at first.