infinitered / infinitered/reactotron
Unable to enter direct reducer paths when using ImmutableJS
- Dominant language
- TypeScript
- Stars
- 15.6k
- Forks
- 972
- PR merge metrics
- No merged PRs in 30d
Description
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 "\*":

~~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
```javascript
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:
```javascript
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):
```javascript
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:
```json
"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.
Contributor guide
Research direction
Start by reproducing the minimal ImmutableJS reducer and Reactotron configuration described in the issue, then trace how reactotron-redux handles direct subscription paths. Done means paths such as foo and bar can be entered to inspect the corresponding ImmutableJS state without relying on a wildcard subscription.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native, redux
- Domain
- devtools
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100