RxReactJS is a new way of creating a single source of truth without using redux, mobx or some of those well-known alternatives. It uses rxjs plus high order components to compose your single state observable. To use it is not required to know rxjs, you just need to call 2 functions (one to share data, and another to receive it) and that's it.
npm i rxjs rxreactjs
First create a provider class to share the data.
Ex:
//Provider.jsimportReact,{Component}from'react';import{createContext}from'rxreactjs';classProviderextendsComponent{constructor(){super();this.state={someData:null,};this.actions={changeSomeData:this.handleChange=this.handleChange.bind(this),};}componentDidMount(){this.setState({someData:'A data coming from fetching'});}componentDidUpdate(){createContext('MY_CONTEXT',this.state,this.actions);}handleChange(){this.setState({someData:'some data changed by action'});}render(){return(<React.Fragment><MyComponent/></React.Fragment>);}}exportdefaultProvider;Now you can go to any file and call the value that you stored, don't need to be children of the provider.
Ex:
importReactfrom'react';import{mapContextToProps}from'../rxreactjs';functionOutterUsingContext(props){const{ state, actions}=props;return(<div><div>{state&&state.someData}</div><buttononClick={()=>actions.changeSomeData()}> Change the data</button></div>)}// This is how we inject itexportdefaultmapContextToProps(OutterUsingContext,'MY_CONTEXT');And that is it. Simple no? You can call Outter whatever you want and it still will work.
ThemapContextToProps function share the data only of the context that you want to receive. Contexts are small pieces of data with state and actions, like a redux store but componentized.
My suggestion is that you create small contexts for each complex component, like a Shelf of products, a MiniCart or etc. And keep those stateless using just the provider state and actions to change data.
But if you still want to receive all data in some component we also have the functionmapStoreToProps that injects all contexts like redux does. I don't recommend this use in every component because it delivers too much unnecessary data just like redux and also needs to handle destructuring async in 2 levels. The large-scale use of this is a lack of data architecture organization and should be avoided unless you face no option.
Ex:
importReactfrom'react';import{mapStoreToProps}from'../rxreactjs';consthandleSomeData=(store)=>(store&&store.MY_CONTEXT&&store.MY_CONTEXT.state.someData);functionOutterUsingStore(props){const{ store}=props;return(<div><div>{handleSomeData(store)}</div><buttononClick={()=>store.MY_CONTEXT.actions.changeSomeData()}> Change the data</button></div>)}// This is how we inject itexportdefaultmapStoreToProps(OutterUsingStore);It is 100% tested :D
npm run test