search

klarna / electron-redux

Use redux in the main and browser processes in electron
MIT License
743 stars 94 forks source link

How to 'watch' state in main process to control BrowserView visibility #292

Closed markelrod closed 3 years ago

markelrod commented 3 years ago

Getting started with electron and redux and trying to figure out how to best use it to control the visibility of multiple BrowserViews in the app on the main process side.

On the renderer side of things I can useSelector and when state changes the component can re-render. What is the equivalent for watching for a state change in the main process ? Let's say a link in the renderer is clicked and this should cause a window to become visible. createAliasedAction seems promising and I can see how that action would trigger a state change in the store on the main side but is it ok to perform an operation like mainWindow.addBrowserView(aView); in the action?

Should this be done through redux at all? Should I just be using straight IPC to tell the main process to show the BrowserView?

Thanks for the help!

matmalkowski commented 3 years ago

Hi @markelrod

Store can be "observed" like you said in React via the useSelector hook, that will basically link to the store, and on detecting change of that part of the store, force the hook to re-render (that eventually makes the component using it re-render as well with the latest state)

To access the store in the main process, where it is not part of the react context, you can still access the store directly and also listen to actions and store changes manually - with store.subscribe() method that is exposed by redux - you can read about it here

When working with electron-redux you have to dispatch action from renderer process and make sure you handle the main store subscribtion to run the operation (mainWindow.addBrowserView(aView); for example) after the dispatched action updates the store state.

Hope that helps :)

markelrod commented 3 years ago

That makes complete sense. Thank you for clarifying.

One more question about createAliasedAction. Not sure if this is a bug or not. Are the action creators that were generated using createAliasedAction supposed to be able to be used directly as the keys for the extraReducers like createAction?

Given the following createAliasedAction:

export const visible = createAliasedAction(
          'view/visible',
          ...

The following code does not work:

const chatSlice = createSlice({
  extraReducers: {
    [visible]: (state, { payload: visible }) => {
...

but this does work:

const chatSlice = createSlice({
  extraReducers: {
    'view/visible': (state, { payload: visible }) => {
...

let me know if the first is supposed to work or not and if so I'll file a bug. Thanks!

matmalkowski commented 3 years ago

I believe the first parameter to the createAliasedAction is the action identifier, so in key should be 'view/visible' not the one with missing view part (its just the string in the end that the redux will be comparing), so I don't think its a bug