Photo by on Steve Halama Unsplash So far, in the previous two posts, I covered the topics “How to Create a Redux Library with RxJS” and “How to Write Redux Middlewares”. Before starting the 3rd and the last part of the series, I would recommend you to check the first 2 parts below: _An experiment to combine RxJS and all Redux helper libraries to create a “state management for React with similar fingerprints to Redux._hackernoon.com DIY Redux with RxJS => RxDx _An experiment to combine RxJS and all widely used Redux middlewares into one library_hackernoon.com DIY Redux with RxJS: Part 2 In this part, I will create a (Higher Order Component) to connect with . I assume that you already know about React.Component, so that I won’t be explaining it again. But I need to explain s which is the heart of what I will demonstrate below. HOC RxDx React.Component HOC What the heck are these Higher-Order Components? Basically, HOC is a class . But what is a class decorator? Sometimes while we are coding we start feeling that all classes we create have the same basic properties. At that point, we realize that we are repeating ourselves which is completely against the rule. So we start trying to find a way to isolate the repeating parts. Or while we are coding we need to add a feature to our classes without changing the implementation of it. In both cases, our purpose is to achieve code sharing between classes. So the very best answer to our problem described above is kind of a . decorator DRY class factory function Class factory functions are functions which returns a class. (welcome to the weirdness of the javascript world). // the most primitive description of a class factory functionfunction (someArguments) {return class {}} giveMeClass SomeDynamicallyGeneratedClass The primitive class factory function is not a class decorator yet. To be a class decorator, a class factory function requires a class as an argument and the returning/produced class will be an extended version of the input class: //enhance decoratorfunction (targetClass) {return class extends {constructor() {this.isEnhanced = true;}} ehance EnhancedClass targetClass //usage in enviroment where experimental decorators allowed@enhaceclass {} Normal console.log(new Normal().isEnhanced) // true //usage in enviroment where experimental decorators not allowedclass {} Normal const = enhance(Normal); Enhanced console.log(new Enhanced().isEnhanced) // true As it’s mentioned before, s are also decorators and works exactly the same way as a class decorator. A takes a component -which is a class- and returns another component. For detailed documentation of s you may follow the link below but if you are in the mood TL;DR I will continue with a summary of it: HOC HOC React React HOC _A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the…_reactjs.org Higher-Order Components - React Now it’s time to extend the decorator example above to make it a by replacing class input and output with a . I have to mention that using React component as input/output gives us a couple of opportunities, but I will continue with recommended one which is wrapping the original component with another: HOC React Component // a primitive HOC which makes A component great nothing :)function (WrappedComponent) {return class extends {constructor() {this.state = {isGreat: true}} makeGreat EnhancedComponent React.Component render() {  
     return <**WrappedComponent** {...this.props, ...this.state} />  
  } }} // usageclass extends {render() {return <div>{this.props.isGreat? 'Great': 'Lame'}</div>}} LameComponent React.Component const = (LameComponent); GreatComponent makeGreat < /> // this will render <div>Lame</div>< /> // this will render <div>Great</div> LameComponent GreatComponent // alternative usage if experimental decorators are allowed@makeGreatclass extends {render() {return <div>{this.props.isGreat? 'Great': 'Lame'}</div>}} LameComponent React.Component < /> // this will render <div>Great</div> LameComponent I believe we need to go deeper right now, so buckle up. At this point, you still don’t know about you may check it from this because I will explain how to connect to . RxDx link RxDx React.Component Stitching the RxDx with a React Component: A real-life example of HOC Did you remember the from and function from ? This is the moment they will come in handy since we will use them as the cement between and . Store.select get a selector or a series of strings and return an observable to allow us to be notified of state updates. We can subscribe to all of these observables in and on each update we can re-render the component by using and to prevent memory leaks we have to unsubscribe from all subscriptions in selectors Part 2 store.select Part 1 RxDx React.Component componentDidMount forceUpdate componentWillUnmount: class extends { () {this.subscription = store.select(someSelector).subscribe((update) => {this.setState({data: update});this.forceUpdate();} () {this.subscription.unsubscribe();} () {return (<div>{ this.state.data }</div>);}} SomeUglyComponent Component componentDidMount componentWillUnmount render Ok, I have to admit that this will work but is not that ugly as we have only one of it. Let’s imagine we have to implement such components tens of, hundreds of times. Now it seems uglier, right? A generalized solution for this repeating task is required and the should be as simple as possible so we can call it . The desired would be as follows: SomeUglyComponent SomeUglyComponent SimpleAndNiceComponent SimpleAndNiceComponent const = ({data: store.select(someSlector)})(({data}) => <div> {data} </div>); SimpleAndNiceComponent connect //or@ ({data: store.select(someSlector),})class extends { () {const {data} = this.props;return <div> {data} </div>;}} connect SimpleAndNiceComponent Component render So how do we achieve this simplicity and how we wire observables to props? The answer is hidden inside the s. We need one step further than simple , what we need is a factory. I will implement a function which takes observables and returns a which takes a and returns an enhanced/wrapped HOC HOC HOC connect HOC React.Component React.Component: For the sake of clarity, the example above is simplified. For sure, if we need to use it for production, we have to think more about and and also strategies. Even though it’s a simplification this code piece will do the trick and will allow us to write simpler components with a generalized connect mechanism with async nature of observables and sync nature of . edge usage cases debuggability error prevention and recovery React.Component Final, final, final words Yes, finally we have all in one powered equivalent library. All I can say that I learned a lot working on this experiment and I wanted to share it hoping that my journey will help others. Next steps will be using it, growing it and loving it! RxJS Redux If you managed to read up to this point and bared with me through this experiment, I will be extremely glad. ! Please don’t forget to or drop your . A big thanks to you clap comment below If you want to contribute to my experiment and help me to make it a real library which can possibly solve real-life problems, don’t hesitate to click the link below and contribute. You will be only welcomed! _a redux like library for react based on rxjs. Contribute to onerzafer/rxdx development by creating an account on GitHub._github.com onerzafer/rxdx

Understanding Micro Frontends

DIY Redux with RxJS: Part 2

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

DIY Redux with RxJS: Part 3

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

DIY Redux with RxJS: Part 2

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

DIY Redux with RxJS: Part 2

10 Resources That’ll Make You Better At Dashboard Creation

10+ Ridiculously Cool Admin Themes And Templates

10 Reasons Why Front End Development Is a Great Career Choice

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps