DIY Redux with RxJS = RxDx
Tags: redux, javascript, rxjs, react
Published: 2019-01-17 13:37:56

---
title: DIY Redux with RxJS = RxDx
published: true
tags: redux,javascript,rxjs,react
canonical_url: https://hackernoon.com/diy-redux-with-rxjs-rxdx-23163a87ade1
---

![](https://cdn-images-1.medium.com/max/1024/1*dvz733Mj3DVx2ytegmBW-g.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>

State management is a must if you are developing a huge app, and using proper state management can be a real lifesaver. On React, Redux is our lifeguard, and on Angular, we have NgRx for this role.

I think, on the architectural level both have similar boilerplates and if you grasp one already, your learning curve for the other will be smoother. What I really like on NgRx is not the library itself but RxJS, which is really the most amazing library for handling the streaming events.

While I was investigating on Redux and NgRx, I realized that there are hardly any people who use Redux by itself without lots of helper libraries, but on the other hand the case is not similar for NgRx as it provides all in one solution in most of the cases. **So I decided to make an experiment to combine RxJS and all Redux helper libraries for creating a super duper state management library for React with similar fingerprints like Redux.**

At this point, the recipe was obvious: Firstly, I reimplemented Redux with RxJS and added some middleware salt on top of it and it’s ready to serve! So with this post, I will try to explain how I did it.

**Hint: I released the alpha version of the resulting library already and you can check it ** [**here**](https://github.com/onerzafer/rxdx) **.**

### Step 0: Deconstruct Redux and Related Libraries

Redux provides mainly a **createStore** function which obviously creates a store. This createStore takes a **reducer,**  **initial state,** and an **enhancer**.

**Reducer** is a function which takes a state and returns a state. Quite simple, right? But wait a minute, I will need more than one reducer, which means I will need a helper function to combine all reducers into one big fat reducer.

For a similar purpose, Redux has **combineReducers** function which is very handy. An **initial state** is an object which may be an empty or undefined state at all. Even simpler! The **enhancer** is a little bit weird which has the following signature:

```
(createStore) => (reducer, initialState) => store
```

Again I will need more than one enhancer and again I will need a helper function to combine all enhancers into one which is called **applyMiddleware.**

When we run createStore function it returns an object similar to the simplified object below:

```
{
   getState: () => state,
   subscribe: () => unsubscribe,
   dispatch: (action) => void
}
```

**getState** returns the current state. **Subscribe** returns an **unsubscribe** object but if I’m planning to use RxJS I can use its own subscription and unsubscription. As a result, I will have a simpler implementation. **Dispatch** functions actually pass the action to the reducer. And again RxJS will become handy here which has its own dispatching mechanism.

So, I have created a TODO list to achieve my goal:

- Implement `createStore(reducer, initialState, enhancer) => store`
- Implement `combineReducer(structuredReducersObject) => reducer`
- Implement `applyMiddleware(createStore) => (reducer, initialState) => store`

Let’s start!

### Step 1: createStore with the help of RxJS BehaviourSubject and operators

At any time a **store** consumer calls **getState,** store should return the current state back. If I use **BehaviourSubject** as state source the implementation of internal store state will be easier since similar behavior from RxJS observables belongs to **BehaviourSubject** by calling **BehaviourSubject.value**.

This is how it’s done:

{% gist https://gist.github.com/onerzafer/889f3b926c13e6aa69780012de5b7c68 %}

I will rephrase what I did here in HUMAN words. In the **createStore** function, I created a **Store** with given **reducer** and **initialState**. If there is an **enhancer** I pass a fake **createStore** function which will return already created **Store** , as a result, it will return enhanced **Store**. Then I dispatch the first action and return the created or enhanced store. So when the **createStore** function is called, we can use the **store reference** in our app. Maybe this reference can be passed to some react context provider.

As you can see, the most complicated part is the **select** function and it is not a must-have feature at all. I added this part to have an interface such as **reselect**. As I can understand so far, the **subscribe** function of Redux is not a widely used feature of it but react-redux library uses it to get the updates and rerender the component (if anybody uses it directly please comment it below, because in my experiment I couldn't find any use case for my subscribe function).

**So, the createStore function so far should be able to work for one reducer and one enhancer, which means the backbone of my RxJS based Redux library is ready to be named: From now on I will call it RxJs + Redux = RxDx.**

### Step 2: How to create a combineReducers function?

When I checked the **combineReducers** source code from Redux, I realized that it takes an object (which can be nested) of which the keys have a reducer and as a result returns a bigger reducer.

Let start with the following initial code:

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

For now, I will avoid error prevention and error handling (I will trust whoever uses this function). The idea here is to loop over the keys of reducers object and to call the attached reducer with related state part and the action.

As a result, all reducers will update only the related part of the state and I will combine the results in the same structure and return them. While I was trying to code this function I noticed the name of the function has the solution itself: **Array.reduce.**

{% gist https://gist.github.com/onerzafer/62f5b30296ed29dcb9d10e8481c9ef41 %}

### Step 3: The Magical applyMiddleware function

If you take a closer look into the Redux implementation, the biggest magic happens with only one function named **compose**. What does the compose function do? Actually, it is pretty simple as it takes a list of functions, wraps each of them by passing the second wrapped one to the first, the third to the second and so on, and finally returns this weird nested function:

{% gist https://gist.github.com/onerzafer/139cea747c847cc52588f07593120b2e %}

As you can see above, the functions a,b,c,d,e becomes A(B(C(D(E(…args))))). This behavior is crucial because all enhancers should be able to be called on each action and all of them should be able to alter the action or dispatch a new one or even delay the original one. There is one more restriction to enhancers as they should follow the signature below:

```
// sample enhancer signature
const enhancer => (createStore) => (next) => (action) => state
```

Finally, I ended up with the following function by omitting the error handling and error prevention parts:

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

### Final Words

Actually, RxDx currently includes lost of other functionalities and if you are willing to check them out and all the example usages, you may check the [repo](https://github.com/onerzafer/rxdx) and [sample todo app repo](https://github.com/onerzafer/rxdx-sample-app).

This is the core part of RxDx and I am planning to explain it further how to connect the RxDx to React components with a follow-up article to this one.

With the follow-up article, I am hoping to shed some light into the inner structure of react-redux and then I will move forward to react-observable, then reselect libraries.

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.

{% link https://dev.to/onerzafer/diy-redux-with-rxjs-part-2-2lpg %}

*This article is published at hackernoon.com. This version is slightly adapted to dev.to*
[DIY Redux with RxJS: Part 2 on Hackernoon](https://hackernoon.com/diy-redux-with-rxjs-part-2-f9d4c53fa230)

* * *