Usage with redux-devtools

[Legiew]

Hey @aslilac,

I stumbled across your lib when I was looking for a replacement for klarna/electron-redux. I have an electron app with react, which I need to update to electron >= 14.

I got your lib working but now have problems with getting the redux devtools ready. Do you got it working with your lib?
I think the problem is the order of StoreEnhancers and call of compose functions. klarna/electron-redux have a possible solution for this in their 2.0 alpha branch, but it is not maintained anymore.

[aslilac]

I've never really bothered with the Redux dev tools. Is there something special required to use them?

[Legiew]

Yes I think there is. I got it working with electron-redux@2.0.0-alpha.9 with the following. It is not working without the usage of composeWithStateSync or if you use the devToolsEnhancer directly with the redux given compose function. The code for this is here.

import { createStore, applyMiddleware } from "redux";
import { composeWithStateSync } from "electron-redux/renderer";
import { devToolsEnhancer } from "@redux-devtools/extension";

const middleware = applyMiddleware(thunkMiddleware);
const enhancer = composeWithStateSync(middleware, devToolsEnhancer());

const store = createStore(
  reducer,
  enhancer
);

If I use your lib I can make it work without using redux-devtools or in a way that I can see the actions in the devtools but then they are not transfered between renderer and main process in electron anymore. And I want to have both of course :-)

[aslilac]

import { syncRenderer } from "@mckayla/electron-redux";

const composeEnhancers =
	(...enhancers) =>
	(createStore) =>
		enhancers.reduce((createStore, enhancer) => enhancer(createStore), createStore);

export const store = createStore(
	reducer,
	composeEnhancers(
		syncRenderer,
		applyMiddleware(thunk),
		devToolsEnhancer(),
	),
);

I tested out this idea with redux-thunk and it seems to work! can you try getting the dev tools working this way?

If this is sufficient, I might start shipping this little composeEnhancers function with the library

[aslilac]

actually wait, I wish I had've googled this first, Redux exports a compose function that does basically exactly this 😂

[Legiew]

Hey,
I am back from vacation and tried a little bit more.

The redux compose function or the composeWithDevTools function from @redux-devtools/extension don't work together with electron-redux or your lib. I tried again with the newest version of your lib.

I think that's the reason why they introduced the function composeWithStateSync in electron-redux. Without it you have the same problems there. s. klarna#285 and klarna#296

I don't have deep insights in how this all works, but to me it seems that the actions are getting lost, if we use the redux devtools and electron-redux together. In the linked PR the extensionCompose function seems important, because it wraps the given enhancers and puts the forwardActionEnhancer in the last position.