High level overview:

Example usage:

import{createFluxRegistry}from'flux-registry'importReact= require('react')importReactDOM= require('react-dom')// first create a registryconstflux=createFluxRegistry<{// definition of global statemyNumber:number}>()// register any number of actionsconstincrementNumber=flux.registerAction<{// definition of action payloadamount:number}>({// unique type name for the actiontype:'increment',// function to update the state when action is dispatchedreduce:({myNumber},{amount})=>({myNumber:myNumber+amount})})// register any number of react componentsconstIncrementButton=flux.registerComponent<{// definition of component props (OwnProps)incrementBy:number}>({// render function. dispatch is provided with the props// use it to dispatch previously registered actions from event handlersrender:({incrementBy, dispatch})=>{constonClick=()=>dispatch(incrementNumber({amount:incrementBy}))return<buttononClick={ onClick}>Incrementby{ incrementBy}</button>}})// registered components can select additional props (SelectedProps) from the global stateconstNumberDisplay=flux.registerComponent<{// OwnPropsmultiplicationFactor:number},{// SelectedPropstotalValue:number}>({// must provide a selectProps function in this case: (State, OwnProps) => SelectedPropsselectProps:({myNumber},{multiplicationFactor})=>({totalValue:myNumber*multiplicationFactor}),// OwnProps and SelectedProps are merged into a single object for the render functionrender:({totalValue, multiplicationFactor})=>{consttext=`${totalValue} (multiplied by${multiplicationFactor})`return<p>{ text}</p>}})// create a store that holds a single instance of the global stateconststore=flux.createStore({initialState:{myNumber:0}})// Wrap all registered components into a single store.Provider at the root of your component tree.constApp=()=>(<store.Provider><NumberDisplaymultiplicationFactor={5}/><IncrementButtonincrementBy={2}/></store.Provider>)// That's it, we can render our appReactDOM.render(<App/>,document.getElementById('root'))