npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@getstation/electron-redux

v1.0.1

Published

Use redux in the main and browser process in electron

Downloads

10

Readme

@getstation/electron-redux

CircleCI

Differences with trunk repo

  • This fork doesn't enforce FSA
  • Support for ImmutableJS but drop of support for POJSO
  • Change dispatch execution order: the process from where the action is dispatched reduces action immediately instead of waiting for the the main to dispatch action in other processes.

Motivation

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

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

The solution

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.

electron-redux basic

Install

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.

Local actions (renderer process)

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',
    },
  };
}

Aliased actions (main process)

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.