What is RDB

RDB (Redux Broadcasting) is created over Redux. Aim of the project is to remove reducers & actions and make a library similar QT Signal Slot logic
With this library we can change master state values only emitting signals with values. eg: rdb.broadcast('s_lang', 'fr')

Installation

You can install the lib from github: yarn add https://github.com/nsslib/rdb

Usage Scenario

Lets say we have language code for changing the app language dynamically and we already set it into redux main state. I would like to emit changed lang code from one component with slots and then receive the signal from any listening components.

As we said, there is no actions and reducers.

// utils/Statemanager.js //This is your rdb file where you created your store and exported modified rdb for your app.importReduxThunkfrom"redux-thunk";import{RDBroadcast,Provider}from"rdb";// this is the global state for your app, there is no any other state will be defined in the app, just make one such that. I usually give names to keys starting with "s_" to indicate it is a signal.letglobalstate={s_langcode: "en"// fr, tr, en etc...}constrdb=newRDBroadcast();rdb.setInitialState(globalstate);rdb.createStore(false,ReduxThunk);constrdbconnect=<T>(Component: React.ComponentType<T>): React.ComponentType<T>=>{returnrdb.hoc<T>(React.Fragment,{},Component);};export{Provider,rdb,rdbconnect};/***Nowrdb is instantiatedandexported,usethisinstantiatetoreachyourglobalstate.**IntheAppneveruse**importfrom'rdb'**,importfromhere.*/

// App.js your main file for the app.// You typically define your routing inside App > Providerimport{rdb,Provider}from"@utils/Statemanager"constApp=()=>{return(<Providerstore={rdb.store}><Header/><Footer/></Provider>);};

Here is components that should communicate using RDB

// A Header component lets say Header.js// Lets say we have defined more components such that.// utilsimport{rdbconnect}from"@utils/Statemanager";constHeader=()=>{return(<PressableonPress={()=>{rdb.broadcast("s_lang","tr")}}><Text>I am a Header</Text></Pressable>);};exportdefaultrdbconnect(Header);// export default rdb.hoc<T>(React.Fragmant, {}, Header); also you can export it with interfaces.

// A Listener component lets say Footer.js// Lets say we have defined more components such that.// utilsimport{rdbconnect}from"@utils/Statemanager";interfaceProps{// signalss_lang: string// or you can define enums for that. It is up to you.}constFooter: React.FC<Props> = (props) =>{return(<View><Text>Current language is {props.s_lang}</Text></View>);};
export default rdbconnect(Footer);
// export default rdb.hoc<T>(React.Fragmant, {}, Header); also you can export it with interfaces.