Redux dev tools one step behind.

[tomitrescak]

Hi, thanks for all the amazing work! I have an issue with connecting Redux dev tools to mobx state tree. While the connection works like charm, it seem that the process is one step behind. Please check the GIF. When I switch my UI component from "signIn" view to "resend verification" it dev tools the view change is recorder as "verification -> sign in".

This is how I initialise my store:

const state = accountStore.create();
global.__store = state;
connectReduxDevtools(require('remotedev'), state);
state.setView('signIn');
return <AccountsRoot state={state} />;

[tinchoz49]

I had exactly the same issue today. The connection works great, mobx-state-stree works great (it's an amazing library) but I noticed the same one step behind problem.

[theorye]

Are you guys using the remotedev that connects to the remotedev.io server or a local server?

[tinchoz49]

Yes, I'm using remotedev.io server. It's happening the same problem in the todomvc example.

I think the problem is that redux for example runs a @@INIT action at the begin and then the next actions can do a diff of the state correctly.

In our case, MST doesn't have an init action and I don't think that is necessary, maybe we can simulate it to fix this issue.

[mweststrate]

Generating an `@@INIT` with the initial snapshot when setting up the wrapper is trivial probably fixes it indeed Op vr 11 aug. 2017 om 23:22 schreef Martín Acosta <[email protected]

…

: Yes, I'm using remotedev.io server. It's happening the same problem in the todomvc example. I think the problem is that redux for example runs a @@init action at the begin and then the next actions can do a diff of the state correctly. In our case, MST doesn't have an init action and I don't think that is necessary, maybe we can simulate it to fix this issue. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#287 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhHa2O67bWaEA0qYtK3dZVyh0ctZuks5sXMYwgaJpZM4OtJMq> .

[tinchoz49]

Hi @mweststrate @mattiamanzati! I've been thinking that maybe there is an issue here:

mobx-state-tree/src/interop/redux.ts

Line 71 in 80d98e4

export function connectReduxDevtools(remoteDevDep: any, model: any) {

When you execute an action, MST detect the action using the onAction, a middleware that it's executing before the action applys the changes on the store, so when you get a snapshot of the store (line 93) you are getting the old state again and redux-devtools can't diff correctly (prevState == newState)

Maybe we can add new middleware onAfterAction or I was thinking in change the original onAction to:

onAction(
    target: IStateTreeNode,
    beforeListener: (call: ISerializedActionCall) => void, 
    afterListener: (call: ISerializedActionCall) => void 
)

What do you think?

[mattiamanzati]

Fixed in 0.10.3