Photo by on Steve Halama Unsplash 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 . Step 0: Deconstruct Redux and Related Libraries Redux provides mainly a function which obviously creates a store. This createStore takes a and an . createStore reducer, initial state, enhancer 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. Reducer For a similar purpose, Redux has function which is very handy. An is an object which may be an empty or undefined state at all. Even simpler! The is a little bit weird which has the following signature: combineReducers initial state enhancer (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} returns the current state. returns an 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. functions actually pass the action to the reducer. And again RxJS will become handy here which has its own dispatching mechanism. getState Subscribe unsubscribe Dispatch 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 consumer calls store should return the current state back. If I use as state source the implementation of internal store state will be easier since similar behavior from RxJS observables belongs to by calling . store getState, BehaviourSubject BehaviourSubject BehaviourSubject.value This is how it’s done: I will rephrase what I did here in HUMAN words. In the function, I created a with given and . If there is an I pass a fake function which will return already created , as a result, it will return enhanced . Then I dispatch the first action and return the created or enhanced store. So when the function is called, we can use the in our app. Maybe this reference can be passed to some react context provider. createStore Store reducer initialState enhancer createStore Store Store createStore store reference As you can see, the most complicated part is the function and it is not a must-have feature at all. I added this part to have an interface such as . As I can understand so far, the 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). select reselect subscribe 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 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. combineReducers Let start with the following initial code: 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. 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 . 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: compose 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 signatureconst enhancer => (createStore) => (next) => (action) => state Finally, I ended up with the following function by omitting the error handling and error prevention parts: 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 and . repo sample todo app repo 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 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. For Part 2 follow the link: _An experiment to combine RxJS and all widely used Redux middlewares into one library_hackernoon.com DIY Redux with RxJS: Part 2

Super

DIY Redux with RxJS: Part 2

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

DIY Redux with RxJS => RxDx

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

DIY Redux with RxJS: Part 2

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 2

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