A smol redux-inspired store for your electron app.
npm install smol-store
Sure, there are other libraries out there that achieve the same, but this lib is very smol, it's dumb simple (~75 lines of code), and the API consists of only 4 functions.
This was implemented from scratch in an @araBlocks electron application. It's been a real asset, so it's been pulled out and packed into an npm module.
//reducers.js
module.exports = {
aNumber: (state, load) => {
switch (load.type) {
case 'ADD_1':
state += 1
break
case 'ADD_2':
state += 2
break
default:
state += load.value
}
return state
}
}
//state.js
module.exports = { aNumber: 0 } //property names must match reducer names
//main.js (root of electron app)
const smolStore = require('smol-store')
const state = require('./state')
const reducers = require('./reducers')
smolStore.initialize(state, reducers))//initialize needs to be called before API can be used
//set regular listeners for main process - call `dispatch` when heard
ipcMain.on('increment_1', () => smolStore.dispatch({ type: 'ADD_1' }))
ipcMain.on('increment_2', () => smolStore.dispatch({ type: 'ADD_2' }))
ipcMain.on('increment_custom', (event, value) => smolStore.dispatch({ type: 'CUSTOM', load: { value } }))
//index.js (script for index.html)
const { ipcRenderer } = require('electron')
const { subscribe, state } = require('smol-store')
document.getElementById('button1').onclick = () => ipcRenderer.send('increment_1')
document.getElementById('button2').onclick = () => ipcRenderer.send('increment_2')
document.getElementById('button3').onclick = () => ipcRenderer.send('increment_custom', Math.random())
const display = document.getElementById('display')
display.innerText = state.aNumber//`state` is the object created in state.js, made global through `initialize`
//the callback passed into `subscribe` will be called when the `state` has been changed.
subscribe(() => display.innerText = state.aNumber)
someReducerName(state, load)
A function that corresponds to a property on the state that holds instructions for modifying that piece of the state, based on the type
value the load
holds. Must be called in main process
state
- The property of the state that corresponds to the reducerload
- An optional value passed into the reducerinitialize(state, reducers, [opts])
Sets the initial app state and creates the dispatch function you'll use to update your state.
state
- An object representing the initial state of the app.reducers
- An object with properties whose values are functions, whose property names are the same as the state
property it corresponds to. The function will work to modify that part of the state
.opts
- An object you can add properties to that will change the value of the string dispatch
emits to renderer processes, the value of the string your renderer process emits to the main renderer to subscribe to changes, and the value the renderer process emits to unsubscribe to changes. I'd leave the defaults unless your having naming clashes 😁. The properties you can add to opts:
kRefresh
(default: 'REFRESH'
) - Triggers callback passed into subscribe
kSubscribe
(default: 'SUBSCRIBE'
) - Subscribes a renderer process to state changeskUnsubscribe
(default: 'UNSUBSCRIBE'
) - Removes subscription from renderer processstate
A getter
function that returns the state
. Stored in the main process' global
variable.
dispatch(load)
Dispatches an object to all reducers to modify the state accordinly. Will emit a 'REFRESH'
message to all subscribed renderer processes after updating state. Must be called in main process.
load
- an object with atleast one property called type
. Other properties that hold arbitrary values can be addedsubscribe(callback)
Emits a 'SUBSCRIBE'
message from the given renderer process to the main process to ensure it emits a 'REFRESH'
message to it when state has changed. Creates a listener for the message, and upon the deletion of the given render process, emits an 'UNSUBSCRIBE'
message to the main process. Must be called in renderer process.
callback
- This callback will fire anytime the 'REFRESH'
event is heard. Most often this will use the updated state to render UI changes.