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

@wnayes/electron-redux

v2.0.0-alpha.11

Published

Redux & Electron: Make sure all your stores are on the same page

Downloads

7

Readme

🚧 THIS IS ALPHA version of the library - the API still might change 🚧

@wnayes/electron-redux is a fork of electron-redux alpha that makes the following changes:

  • Updates package.json to use standard exports conventions for esm/cjs dual modules. (alpha.10)
  • Removes lodash dependencies. (alpha.11)

electron-redux

Electron-Redux is an Redux Store Enhancer that helps you loosely synchronize the redux stores in multiple electron processes.

When working with Electron, using Redux poses couple of problems, since main and renderer processes are isolated and IPC is a single way of communication between them. This library, enables you to register all your Redux stores in the main & renderer process, and enable cross-process action dispatching & loose store synchronization.

GitHub Workflow Status npm (tag) npm npm bundle size (version) semantic-release Conventional Commits

Installation

# with yarn
yarn add electron-redux@alpha

# with npm
npm install electron-redux@alpha

For more details, please see the Installation docs page.

Documentation

electron-redux docs are located at electron-redux.js.org. You can find there:

Quick start

Basic setup

If you have a setup without any enhancers, also including middleware, you can use the basic setup. For the basic setup, electron redux exposes a Redux StoreEnhancer. You simply add the enhancer to your createStore function to set it up.

// main.ts
import { stateSyncEnhancer } from 'electron-redux'

const store = createStore(reducer, stateSyncEnhancer())
// renderer.ts
import { stateSyncEnhancer } from 'electron-redux'

const store = createStore(reducer, stateSyncEnhancer())

Multi-enhancer setup

This setup is required when you have other enhancers/middleware. This is especially the case for enhancers or middleware which dispatch actions, such as redux-saga and redux-observable

For this setup we will use the composeWithStateSync function. This function is created to wrap around your enhancers, just like the compose function from redux. When using this, you will not need stateSyncEnhancer as this does the same thing under the hood. If you do, it will throw an error.

import { createStore, applyMiddleware, compose } from 'redux'
import { composeWithStateSync } from 'electron-redux'

const middleware = applyMiddleware(...middleware)

// add other enhances here if you have any, works like `compose` from redux
const enhancer: StoreEnhancer = composeWithStateSync(middleware /* ... other enhancers ... */)

const store = createStore(reducer, enhancer)

That's it!

You are now ready to fire actions from any of your processes, and depending on the scope the main store will broadcast them across your application.

Please check out the docs for more recipes and examples!

Actions

Actions fired MUST be FSA-compliant, i.e. have a type and payload property. Any actions not passing this test will be ignored and simply passed through to the next middleware.

Nota bene, 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 includes payloads) MUST be serializable.

You can extend default JSON serialization used, by providing your own serialization/deserialization functions.

Scoped actions

By default, all actions are broadcast to all registered stores. 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 by decorating your action with stopForwarding function. Read more about it in the docs

Blocked actions

By default, some of the actions are blocked from broadcasting / propagating, those include actions starting with @@ and redux-form. The list of ignored actions can be modified with options.

Changelog

This project adheres to Semantic Versioning. Every release, along with the migration instructions, is documented on the GitHub Releases page.

Contributing

Contributions via issues or pull requests are hugely welcome! Remember to read our contributing guidelines to get started!

By contributing to electron-redux, you agree to abide by the code of conduct.

License

MIT