Yet another state container. Designed to be fast and simple, with minimum setup required.
npm i pipe-and-gauge
- Define actions for changing the state.
- Create react components representing the state. All of them can be pure functional components.
- Use
createApp
to bindstore
withapp view
. - There are no reducers, no other stuff.
Function that wires together actions
dictionary, initialState
object, react view
and el
(HTMLElement). Underneath, it creates stanard store, which is later returned to allow actions calling and subscription.
React view passed will recieve two properties: store
and state
.
const { createApp } = require('pipe-and-gauge');
const actions = require('./actions');
const initialState = require('./initialState');
const ReactAppView = require('./app');
const el = document.querySelector('#root');
const store = createApp(actions, initialState, ReactAppView, el);
store.action(); // triggers first render
Function that accepts actions
dictionary and initialState
. Returns store object, which has 2 main methods: subscribe
, getState
and all actions passed to it. This store serves as state container and vessel for all the actions that can be called inside components.
const { createStore} = require('pipe-and-gauge');
const actions = require('./actions');
const initialState = require('./initialState');
const store = createStore(actions, initialState);
store.subscribe(({state, _store}) => console.log(state));
store.action();
Actions are the way to change the state the right way. Only there we should see manipulation. React components should be only used represent the current state in the DOM. Action accepts single argument, in which are available:
state
current statedata
argument with with action was calledstore
instance of the store
function action({ state, data, store }){
return {
/* We don't need to spread the rest of the state */
counter: state.counter + 1
}
}
function compositeAction({ state, data, store }){
/* Action can call other ations.
* It's best to avoid direct manipulation of state in such actions. */
store.action(data).someOtherAction();
}
const component = ({ state, store }) => (
<div onClick={store.action}>
{state.counter}
</div>
)
merge
performs merging action result into state; deeply merges the change, allowing actions to only return actually changing stateisObject
checks if variable is an objectrecreate
shallow clone, assigns direct properties of an object to new objectclone
deep clone, uses JSON parse/stringify.