
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@getstation/electron-redux
Advanced tools
Using redux with electron poses a couple of problems. Processes (main and renderer) are completely isolated, and the only mode of communication is IPC.
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. See under the hood.
npm install --save @getstation/electron-redux
@getstation/electron-redux
comes as redux middleware that is really easy to apply:
// in the main store
import {
forwardToRenderer,
triggerAlias,
replayActionMain,
} from '@getstation/electron-redux';
const todoApp = combineReducers(reducers);
const store = createStore(
todoApp,
initialState, // optional
applyMiddleware(
triggerAlias, // optional, see below
...otherMiddleware,
forwardToRenderer, // IMPORTANT! This goes last
)
);
replayActionMain(store);
// in the renderer store
import {
forwardToMain,
replayActionRenderer,
getInitialStateRenderer,
} from '@getstation/electron-redux';
const todoApp = combineReducers(reducers);
const initialState = getInitialStateRenderer();
const store = createStore(
todoApp,
initialState,
applyMiddleware(
forwardToMain, // IMPORTANT! This goes first
...otherMiddleware,
)
);
replayActionRenderer(store);
Check out timesheets 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.
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 to local
:
function myLocalActionCreator() {
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. using promise middleware, which should only ever be executed once (i.e. in the main process). This can be achieved using the triggerAlias
middleware mentioned above.
Using the createAliasedAction
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';
export const importGithubProjects = createAliasedAction(
'IMPORT_GITHUB_PROJECTS', // unique identifier
(accessToken, repoFullName) => ({
type: 'IMPORT_GITHUB_PROJECTS',
payload: importProjects(accessToken, repoFullName),
})
);
Check out timesheets for more examples.
FAQs
Use redux in the main and browser process in electron
The npm package @getstation/electron-redux receives a total of 3 weekly downloads. As such, @getstation/electron-redux popularity was classified as not popular.
We found that @getstation/electron-redux demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.