Photo by on Steve Halama Unsplash In case you didn’t read the part one I would recommend you to read it. The first part is covering how to implement the core functionalities of Redux. _An experiment to combine RxJS and all Redux helper libraries to create a “state management for React with similar…_hackernoon.com DIY Redux with RxJS => RxDx At DIY Redux with RxJS => RxDx Part 2, I will reveal the internals of some most popular and widely used middlewares. As I mentioned in the first part of the article -which you can find above-, my goal is to do an experiment to combine RxJS and all widely used Redux middlewares into a library which can be found . Redux here Before diving into the subject, it is always good to review the required signature of redux middlewares. (storeAPI) => (next) => (action) => state Before I start, I need to confess, when I finished the createStore function I thought with bold confidence that all available middlewares of redux will work for my version of it. Actually, it worked but not for most of them, not for widely used ones :( So I had to provide these libraries/middlewares by re-implementing them or at least implementing similar ones. Here, we go! A different approach to redux-observable Under normal conditions, does not implement/has no intention to implement therefore it is not compatible with RxJS by default. Redux TC39 Observable Here I have to mention the use cases of observables; if you need to operate on streams of events, then it is probably better to use an observable. What kind of operations am I talking on? Merging two streams into one, filtering, mapping or redirecting a stream. For more technical detail check here . When implementing a store you will definitely notice that you have to create lots of actions. I have to admit that actions are pretty similar to events and on the runtime, they will be triggered hundreds of times. So this must be the point where catches as a streaming event source. By doing so, it creates a good opportunity for developers who are willing to create some asynchronous side effects on each selected action. For detailed documentation on , you may check . TL;DR The magic happens in a function called that has the signature below: Redux redux-observable Redux redux-observable here createEppicsMiddleware const createEpicsMiddleware = (rootEpic) => (storeAPI) => (next) => (action) => state To be honest, when I checked the documentation, I didn’t like the way we need to consume this library. For me, the usage of from NgRx is more classy :) So I decided not to mimic the API of redux-observable, yet the functionality should be there. So I ended up something as follows. Effect As I mentioned before I really like NgRx style usage and I borrowed decorator and tappable function. Effect ofType decorator is as simple as adding a type on the original variable. And if your environment supports experimental decorators the usage can be as follows: Effect @Effect()const someCoolAsyncSideEffect = action$.pipe(ofType('SomeCoolAction', 'OrEvenCoolerAction')).pipe(map(() => {type: 'SomeOtherCoolAction'})); Unfortunately, if your environment does not support experimental decorators this code piece won’t look that much handsome. Reselect While I was implementing the createStore function in the first part of this story, I implemented a select function in the exposed store object by trusting my gut feeling. This decision revealed itself as pretty useful in implementing the reselect library of RxDx . To be frank, reselect is completely compatible with RxDx , yet I was experimenting and I needed to challenge myself to combine all libraries into it . What does do? It takes the state or a state portion and returns a portion of it. So what’s the deal? We can achieve the same functionality without it like the example below: reselect const reselect = (state, key) => state[key]; The example above totally undermines the power of this simple yet incredibly useful library. The deal is, the provides a simple repeatable function which has inside to speed up our -possibly complex- filtering on states. reselect memoization This function will have a key functionality while we are consuming the store in react components. The usage of a selector as simple as follows: RxDx Redux Dev Tools Middleware I thought that the absence of the integration to redux dev tools would be a big missing part of . Then I started reading the API documentation of dev tools and I found what I need __REDUX_DEVTOOLS_EXTENSION__.connect RxDx After this point, it was super easy to combine everything into a middleware: Finally, I reached a point which I can create a store, add some reducers, apply built-in optional middlewares and select a specific state child with memoization: Final words until next time I strongly recommend such experiments for anybody who wants to learn more about any library or any kind of design patterns or coding styles. It will cause you to question lots of things you do during normal daily coding tasks of yours. Next time I will continue my experiment with how to combine a redux-like-library with react components and it will include lots of information about and . HOCs decorators If you are also a self-learner like me and a little bit impatient on top of it, let’s just try it yourself until I release the 3rd and the last part of the RxDx article. Here is my repo to start your own experiment: _redux like library for react based on rxjs. Contribute to onerzafer/rxdx development by creating an account on GitHub._github.com onerzafer/rxdx If you are interested in RxDx and enjoyed the article so far, please don’t forget hitting the clap (you can clap up to 50 times). If you share your ideas and feedback below, I would only be glad! Thanks for reading! Part 3: _Higher Order Components and Javascript Decorators are explained in a real-life example._link.medium.com DIY Redux with RxJS: Part 3

Super

DIY Redux with RxJS: Part 3

DIY Redux with RxJS => RxDx

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

DIY Redux with RxJS: Part 2

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

DIY Redux with RxJS: Part 3

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

DIY Redux with RxJS: Part 3

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps