Devtools integration @@INIT action replaces state

[bfitch]

Hi! Thanks for this awesome project. I'm running into an issue with devtools integration where it appears that an extra @@INIT action is causing our page state to be erased.

I pretty much copy and pasted your example code for the store setup like this:

import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction'

const routesMap = {
  HOME: '/',
  CLIENTS: '/clients',
  SETTINGS: '/settings',
  SIGN_IN: '/sign_in'
}

const history  = createHistory();
const { reducer, middleware, enhancer } = connectRoutes(history, routesMap);

const rootReducer = combineReducers({ page, location: reducer })
const middlewares = applyMiddleware(middleware)

const composeEnhancers = (...args) =>
  typeof window !== 'undefined'
    ? composeWithDevTools({})(...args)
    : compose(...args)

const enhancers = composeEnhancers(enhancer, middlewares)
const store = createStore(rootReducer, enhancers)

When navigating to /sign_in in the browser's location bar, 5 actions are dispatched to the page reducer:

1. {type: "@@redux/INIT"}
2. {type: "@@redux/PROBE_UNKNOWN_ACTION_m.q.g.n.b.n"}
3. {type: "@@INIT}
4. {type: "SIGN_IN", payload: {…}, meta: {…}}
5. {type: "@@INIT} <--- Only dispatches when redux-devtools are enabled

The fifth action is what resets the page state to the default and is only dispatched when devtools are on. Have you run into this problem at all? Any pointers would be greatly appreciated. Thanks!

[faceyspacey]

A repro would make it easy. Put it on codesandbox if possible.

Check closed issues. Someone else might have had the same issue. ⛩

[faceyspacey]

it's not happening when you add logging to the reducers in the RFR codesandbox:

https://codesandbox.io/s/github/faceyspacey/redux-first-router-codesandbox

i could have checked the redux devtools, but it leaves some actions out, so i wanted to 100% verify, which is why i added console.log to a reducer to check.

In the demo repo, u dont see the SIGN_IN action cuz state is preloaded from the server and the initial action is not dispatched if u have SSR. Since it's being dispatched for u (and if what ur showing is happening on the client), it's cuz u dont have SSR. There still shouldnt be a second @@INIT. But I cant say for sure without seeing a repro. Again, the codesandbox SPA doesn't do it either. So I'm not sure what's happening for u.

here's the demo repo with SSR: notice no initial action dispatched with the route's type.

[faceyspacey]

Here's a quick "repro" on codesandbox using the loginOnlyInProduction compose like you have:

https://codesandbox.io/s/68GGx0y5l

check the console. it's logged. check the redux devtools. the issue isn't happening.

since ur doing the strategy where u do something different on the server than the client, and on the client its still dispatching the initial action at all, it leads me to think ur trying to do SSR, but it's not correctly setup, which may have something to do with it.

[bfitch]

Thanks James! Sorry, I should have said this is not SSR, only client side. I will push up a minimal example to repro in a bit (currently 3am in the US 😛).

[bfitch]

@faceyspacey Here is a repo with a minimal example showing the issue with the extra "INIT" action with devtools: https://github.com/bfitch/redux-first-router-devtools-issue

1. git clone
2. npm install
3. npm start
4. open localhost:3000
5. enter /sign_in in the browser location bar
6. look at the console.log output, you'll see an extra "INIT" action is dispatched after the SIGN_IN action, reseting the reducer
7. Uncomment the regular compose in index.js (removing devtools) and observe that the extra "INIT" action goes away and routing works correctly

Thanks for your help!

[faceyspacey]

is this still an issue with the latest versions of RFR? try yarn upgrade redux-first-router@rudy.

[faceyspacey]

in the upcoming rudy release, dispatching the initial action will be required by the user, so you can guarantee when it's done. currently you can use the initialDispatch: false option to do so, which returns an initialDispatch() function along with middleware, enhancer, reducer.