infinitered / infinitered/reactotron

Unable to enter direct reducer paths when using ImmutableJS

Open
#1,151 2 comments 2 reactions 0 assignees View on GitHub
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 "\*":

![foobar](https://user-images.githubusercontent.com/25401310/64195990-7f1e9f00-ce8b-11e9-91bb-e82a36bf498f.png)

~~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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.