DIY Redux with RxJS: Part 2
Tags: redux, rxjs, react, javascript
Published: 2019-01-17 13:41:29

---
title: DIY Redux with RxJS: Part 2
published: true
tags: redux,rxjs,react,javascript
canonical_url: https://hackernoon.com/diy-redux-with-rxjs-part-2-f9d4c53fa230
---

![](https://cdn-images-1.medium.com/max/1024/1*rBO29FpCIE8eeZ_hhBhVSA.png)<figcaption>Photo by <a href="https://unsplash.com/photos/iVGevPcaJzk?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Steve Halama</a> on <a href="https://unsplash.com/search/photos/code?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption>

_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._

{% link https://dev.to/onerzafer/diy-redux-with-rxjs--rxdx-1oa1 %}

At DIY Redux with RxJS => RxDx Part 2, I will reveal the internals of some most popular and widely used **Redux** 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 below:
{% github https://github.com/onerzafer/rxdx %}

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, **Redux** does not implement/has no intention to implement [TC39 Observable](https://github.com/tc39/proposal-observable) therefore it is not compatible with RxJS by default.

_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_](https://rxjs-dev.firebaseapp.com/guide/observable)_._

When implementing a **Redux** 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 **redux-observable** catches **Redux** 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 **redux-observable** , you may check [here](https://redux-observable.js.org/). TL;DR The magic happens in a function called **createEppicsMiddleware** that has the signature below:

```
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 [**Effect**](https://ngrx.io/guide/effects) 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.

{% gist https://gist.github.com/onerzafer/fb6a74ee878510edf746103bb9049cbb %}

As I mentioned before I really like NgRx style usage and I borrowed **Effect** decorator and **ofType** tappable function.

**Effect** 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()
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_](https://dev.to/onerzafer/diy-redux-with-rxjs--rxdx-1oa1) _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 **reselect** 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:

```
const reselect = (state, key) => state[key];
```

The example above totally undermines the power of this simple yet incredibly useful library. The deal is, the **reselect** provides a simple repeatable function which has **memoization** inside to speed up our -possibly complex- filtering on states.

{% gist https://gist.github.com/onerzafer/174092a00f4a9df5acfce5a3b5c8f3ff %}

This function will have a key functionality while we are consuming the **RxDx** store in react components. The usage of a selector as simple as follows:

{% gist https://gist.github.com/onerzafer/d2f49894ffc0a742c19437c2921c54ba %}

### Redux Dev Tools Middleware

I thought that the absence of the integration to redux dev tools would be a big missing part of **RxDx**. Then I started reading the API documentation of dev tools and I found what I need \_\_REDUX\_DEVTOOLS\_EXTENSION\_\_.connect

After this point, it was super easy to combine everything into a middleware:

{% gist https://gist.github.com/onerzafer/d87eb2d8e97f0ff64db2c01ba55dd87b %}

**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:**

{% gist https://gist.github.com/onerzafer/f0501b06dcfa2fdd72a2b1a2e19f016f %}

### 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 **HOCs** and **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:

{% github https://github.com/onerzafer/rxdx %}

If you are interested in RxDx and enjoyed the article so far, please don’t forget show your appreciation. If you share your ideas and feedback below, I would only be glad!

Thanks for reading!

*This post originally published on hanckernoon.com. On dev.to it is slightly adapted to platform*

[DIY Redux with RxJS: Part 3 on hackernoon](https://hackernoon.com/diy-redux-with-rxjs-part-3-87eaf23d4092)

* * *