Over the years I've helped over 10,000 engineers hone their craft. Engineers have used my books, articles, and talks to improve their technical skills, get promotions, change jobs, and ship their products faster.

Livecoding recap: Blockchain-redux now shares blocks between clients in real-time

Well… we added a thing to the You Can Use Blockchain To Store And Share UI State proof of concept I’ve been livecoding on. I’d share a live link with you, but… err… the app broke.

This is a Livecoding Recap – an almost-weekly post about interesting things discovered while livecoding. Usually shorter than 500 words. Often with pictures. Livecoding happens almost every Sunday at 2pm PDT on multiple channels. You should subscribe to My Youtube channel to catch me live.

It was working, you see. Then it wasn’t. Infinite loop on page load.

Next time! I promise.

We did get something working, however. When you dispatch an action on blockchain-redux, the generated block is shared live with all other clients. That sharing still happens via Firebase, so it’s not thaaaat impressive, but it’s a step in the right direction.

YAY IT WORKS!!!!!1111oneone blockchain-redux is getting useful for realz

Blocks are shared between clients in real-time. Still backed by Firebase, but baby steps.

The part that’s new is calling listenForNextBlock after replacing the local chain.

Listen for the next block

We have a local chain and want to make sure we catch the next block that shows up. So we fetch the latest index with store.getLastBlock().index, increment by 1, and listen for changes on blockchain/${nextIndex}.

When that block shows up, we call valueHandler.

valueHandler then parses the value and calls store.addBlock(), which validates the block fits our chain, and if it does fit, it gets added. If the block makes it to our local chain, then the redux-y stuff kicks in, wakes up all subscribed components, and re-renders happen.

Completely transparent to your app

All this real-time sharing is completely invisible to your app. You build your code just like it was any other Redux-based app.

To initialize the blockchain and render a live count of nodes, you’d do something like this 👇

Value passed into render prop is the whole blockchain store. Take out getWholeChain and show the length. You could use getState() to get the latest block value, for example.

Lots of stuff you can do.

And to add a new block? Just call dispatch and have a reducer. Blockchain-redux handles the rest 🙂

Next steps

Still have to resolve a few TODO comments around block conflicts. What happens if your network is slow and you add blocks locally that other clients haven’t seen and you get blocks from the outside world that conflict? Which do you pick?

I’m not sure yet.

Plus I really want to move away from Firebase. That’s gonna be fun.

Join me next Sunday as we continue exploring this experiment.

Related

Learned something new? Want to become a better engineer? 💌

Join 9,400+ people just like you already improving their skills.

Here's how it works 👇

Leave your email and I'll send you an Interactive Modern JavaScript Cheatsheet 📖 right away. After that you'll get a thoughtfully written email every week about React, JavaScript, and lessons learned in my 20 years of writing code for companies ranging from tiny startups to Fortune5 behemoths.

Your Email Address 👇

Man, I love your way of writing these newsletters. Often very relatable and funny perspectives about the mundane struggles of a dev. Lightens up my day.
~ Kostas

PS: You should also follow me on twitter 👉 here. It's where I go to shoot the shit about programming.