To start off I will quickly go through the concept of recursion before showing how you can build your own recursive components. If you already have some knowledge about this feel free to skip ahead.

Recursion

Recursion is very common in divide and conquer algorithms or when working with tree structures of data. It is actually as simple as a function that is invoking itself until it reaches a base case. The base case is the end of the recursion where the function stops calling/invoking itself. If a recursion doesn’t have a base case it will create an infinite loop and go on until something finally crashes.

Recursive React components

Okay, so now we have a basic idea of what recursion is, let’s apply it to some React code. To understand the concept we will look at a very simple implementation of a recursive component.

As previously mentioned, a recursive function is calling itself for n number of times until it reaches a base case. React components are also functions, so what if we call a react component from itself? Et voilà, we have a recursive component! In the below example our component has two props: name and items . We render the name and if we have another level of items we call our component again with the next level instead — in other words we are “recursing”. We do this until we reach an item that doesn’t have any more children, that’s our base case. As you can see we will only call our component if it has children.

To use the component we simply pass some data to it and there you have it!

It doesn’t have to be harder than this. We can pass an indefinite number of levels to the component and it still works. This is actually quite a good foundation to build some cool stuff from by just adding some CSS and a tiny bit of more functionality to it.

Here’s an example of a multi-level stack navigation component built with the same concept. Didn’t spend too much time on the CSS but you get the gist of it ;)

https://codesandbox.io/s/gallant-lehmann-g8ifc?file=/src/App.js

Some final words

There’s nothing magical about recursion and most of the time we can achieve the same results by just using loops. In my opinion recursion should be used lightly as it adds some complexity to the code. But for some specific use cases like a folder structure or a navigation menu where we can have an arbitrary number of children it makes sense to use it, as other solutions like loops could be more complex.

Feel free to comment or link to some of your own implementations using recursive components. Until next time!

Recursive components in React was originally published in Knowit Development on Medium, where people are continuing the conversation by highlighting and responding to this story.

Redux is one of the most used, loved, and confusing libraries in modern frontend. It is something that most new React developers stumble upon and can have a hard time wrapping their head around. In this article I will try to explain how Redux works by creating our own lightweight implementation of it.

But first, what is Redux? According to the Redux docs:

“Redux is a predictable state container for JavaScript apps.”

In other words, redux helps you manage state for JavaScript web applications. It’s most commonly used together with React but can be used together with any framework like Vue, Angular or for vanilla applications without any framework at all.

Illustrated above are the building blocks of Redux architecture; actions, reducer, store and view. Our custom implementation of Redux will follow the above pattern.

The application state is managed in the store. The state itself is just a plain JavaScript object. The store also provides methods to update the state and read from the state.

Redux is using a publish/subscribe (PubSub) pattern to handle state updates. When a user interacts with the UI, actions can be dispatched (published) to update the state. Views can listen (subscribe) to those updates and modify the UI accordingly. Actions in redux are plain JavaScript objects with a type attribute containing a unique key for the action and a payload attribute containing the data.

Actions can’t update the state themselves, they simple tell the reducers what they should update. All updates are handled by reducers which are pure functions taking the state and action as inputs, applying the action to the state and returning the new state.

Built upon this concepts are the three core principles of Redux:

Single source of truth

The state of your whole application is stored in an object tree within a single store.

State is read-only

The only way to change the state is to emit an action, an object describing what happened.

Changes are made with pure functions

To specify how the state tree is transformed by actions, we write pure reducers (pure = functions that returns a given output for every given input).

It might seem complex at first but after creating or own implementation of redux I hope everything will be a bit more clear. Now, let’s apply what we’ve learned in code!

Creating Redux

We will start off with the full implementation of our Redux store and then break it down into pieces. I think this might come as a surprise for many (it certainly did for me), but we can implement a fully working redux store with 16 lines of code (!).

If we simplify the above, the store looks something like this:

const store = {
  state: {}, // a plain object holding our state
  listeners: [], // an array containing all listeners (subscribers)
  getState: () => {}, // function to get the current state
  dispatch: () => {}, // function to dispatch updates to the state
  subscribe: () => {}, // subscribe function to add new listeners
}

In the full implementation you can see that everything is happening inside the function create store. This function takes two arguments; reducer and initialState. As mentioned before, reducers are the only ones allowed to change the state. They do so, not by mutating the state, but by returning a new state with the action applied to the previous state. The initialState argument simply lets us create a new store with some predefined data.

In our implementation state, listeners, and getState are quite self-explaining. State is simply an object holding our state. Listeners is an array holding all listeners (subscribers) and getState is a function that returns the current state. The subscribe function adds new subscribers to the array of listeners. A subscriber is a function that will be executed every time the state is updated.

That’s it for the store, if you remember our architecture we just need to add a reducer, actions and views to have a fully working implementation.

Reducer and actions

It is in the reducer function that most of the magic happens. Reducer takes the previous state and an action as input (we already know that actions are objects containing a type and a payload). The reducer function will apply the corresponding changes for the action and return a new state. A reducer typically looks something like this:

In this example we have two types of actions to modify the state: ADD and SUBTRACT. If we dispatch an action with the type of “add” the reducer will add the number in the payload to the number in the current state. The reducer then returns the updated state. If we dispatch any other action than add or subtract, the reducer will fallback to the default and return the current state without modifications.

The second part of our dispatch function is the listeners. On every state change, we iterate through the array of listeners and execute each one. By doing this we make sure that all views that are subscribing can update accordingly as the state changes.

store.listeners.forEach((listener) => listener());

That is all for our createStore function. Now we will do a full implementation containing all the building blocks; actions, reducers, store and views.

View

We have already created our store and reducer above. The view in our example is a counter that shows a number and have buttons to perform the actions of adding or subtracting from that number. We achieve this with some simple DOM-elements and a subscriber to our store.

And finally we have the actions and dispatch. This is also mapped to our view — if the user clicks the add or subtract button the corresponding action should be dispatched.

All together we get something like this:

This is not a production ready implementation but it can get you quite far. The redux library covers a lot of edge cases and have a few more advanced features. Especially if you use its react wrapper that comes with hooks and other nice functionalities.

Wrap up

Some tools and libraries that can seem daunting at first are actually quite simple when you break them down. Hopefully this article have given you a basic understanding how Redux works. When you feel ready it might be time to experiment with some of the more advanced features of redux or look into popular design patterns like duck and similar.

• Redux - A JS library for predictable and maintainable global state management | Redux
• GitHub - erikras/ducks-modular-redux: A proposal for bundling reducers, action types and actions when using Redux

Recreating redux was originally published in Knowit Development on Medium, where people are continuing the conversation by highlighting and responding to this story.