Repository files navigation

• electron-redux
  • Motivation
    • The solution
  • Install
  • Actions
    • Local actions (renderer process)
    • Aliased actions (main process)
    • Blacklisted actions
  • F.A.Q.
  • Contributions
  • Contributors

Using redux with electron poses a couple of problems. Processes (main andrenderer) are completely isolated, and the only mode of communication isIPC.

• Where do you keep the state?
• How do you keep the state in sync across processes?

electron-redux offers an easy to use solution. The redux store on the main process becomes the single source of truth, and stores in the renderer processes become mere proxies. Seeunder the hood.

npm install --save electron-redux

electron-redux comes as redux middleware that is really easy to apply:

// in the main storeimport{forwardToRenderer,triggerAlias,replayActionMain}from'electron-redux';consttodoApp=combineReducers(reducers);conststore=createStore(todoApp,initialState,// optionalapplyMiddleware(triggerAlias,// optional, see below    ...otherMiddleware,forwardToRenderer,// IMPORTANT! This goes last),);replayActionMain(store);

// in the renderer storeimport{forwardToMain,replayActionRenderer,getInitialStateRenderer}from'electron-redux';consttodoApp=combineReducers(reducers);constinitialState=getInitialStateRenderer();conststore=createStore(todoApp,initialState,applyMiddleware(forwardToMain,// IMPORTANT! This goes first    ...otherMiddleware,),);replayActionRenderer(store);

Check outtimesheets for a more advanced example.

And that's it! You are now ready to fire actions without having to worry about synchronising your state between processes.

Actions firedMUST beFSA-compliant, i.e. have atype andpayload property. Any actions not passing this test will be ignored and simply passed through to the next middleware.

NB:redux-thunk is not FSA-compliant out of the box, but can still produce compatible actions once the async action fires.

Furthermore, actions (and that includespayloads)MUST be (de-)serialisable, i.e. either POJOs (simpleobjects - that excludes native JavaScript or DOM objects likeFileList,Map, etc.),arrays, or primitives. For workarounds, check outaliased actions

By default, all actions are being broadcast from the main store to the renderer processes. However, some state should only live in the renderer (e.g.isPanelOpen).electron-redux introduces the concept of action scopes.

To stop an action from propagating from renderer to main store, simply set the scope tolocal:

functionmyLocalActionCreator(){return{type:'MY_ACTION',payload:123,meta:{scope:'local',},};}

Most actions will originate from the renderer side, but not all should be executed there as well. A great example is fetching of data from an external source, e.g. usingpromise middleware, which should only ever be executed once (i.e. in the main process). This can be achieved using thetriggerAlias middleware mentionedabove.

Using thecreateAliasedAction helper, you can quite easily create actions that are are only being executed in the main process, and the result of which is being broadcast to the renderer processes.

import{createAliasedAction}from'electron-redux';exportconstimportGithubProjects=createAliasedAction('IMPORT_GITHUB_PROJECTS',// unique identifier(accessToken,repoFullName)=>({type:'IMPORT_GITHUB_PROJECTS',payload:importProjects(accessToken,repoFullName),}),);

Check outtimesheets for more examples.

By default actions of certain type (e.g. starting with '@@') are not propagated to the main thread. You can change this behaviour by usingforwardToMainWithParams function.

// in the renderer storeimport{forwardToMainWithParams,replayActionRenderer,getInitialStateRenderer,}from'electron-redux';consttodoApp=combineReducers(reducers);constinitialState=getInitialStateRenderer();conststore=createStore(todoApp,initialState,applyMiddleware(forwardToMainWithParams(),// IMPORTANT! This goes first    ...otherMiddleware,),);replayActionRenderer(store);

You can specify patterns for actions that should not be propagated to the main thread.

forwardToMainWithParams({blacklist:[/^@@/,/^redux-form/],});

As of Electron 10, theremote module is removed by default.

We can get it back by addingenableRemoteModule=true to thewebPreferences:

constw=newBrowserWindow({webPreferences:{enableRemoteModule:true,},});

Contributions viaissues orpull requests are hugely welcome!

Feel free to let me know whether you're successfully usingelectron-redux in your project and I'm happy to add them here as well!

Special thanks go out to:

• Charlie Hess
• Roman Paradeev
• Pelle Jacobs
• Victor Quiroz Castro
• musou1500
• Andreas Dolk
• Everyone who has contributed byasking questions & raising issues