Post Category → Flux

The 5 Types Of React Application State

I don’t know about you, but when I started writing React apps, I struggled to decide where my state should go. No matter how I re-arranged setState calls, things never felt quite right.

"Messy state"

And maybe that is why I got so excited when I found Redux. Redux gave me a single place to put all my state. Which sounded great in theory.

"What if"

But then I realised that having one spot to put things doesn’t necessarily make them easy to get to.

"Still messy"

It turns out that I needed more than just a place to put things. I also need a system for putting them in the right place.

"Banzai!"

For me, that system came from splitting my state into five categories. It turned the problem of deciding “how does this piece of state relate to all the other state”, into the problem of deciding “what type of state is this”. And as it turns out, this is a whole lot easier.

Continue reading →

Simple Routing with Redux and React

TL;DR? Clone the Starter Kit instead.

Have you ever wished that libraries for React apps could be simpler?

Sure, you know that there are cases when all the bells and whistles are an advantage — but for you, features aren’t as important as clarity. Instead of giving up control to fast-moving libraries written by big names, you want to understand what is going on under the hood. And instead of sifting through documentation on twenty different tools before getting started, you want to get stuck into it right now.

And you’re not alone! In fact, most of my work has involved small projects which don’t make use of many of the features provided by popular routing libraries. So instead, I’ve rolled my own routing using Redux and React. And it is so simple that everything you need to know fits into this short guide.

Continue reading →

Can I dispatch multiple actions from Redux action creators?

When using Redux, you may have come across a scenario where you’d like one action creator to dispatch multiple actions.

There are a few reasons you’d want to do this, but let’s consider the problem of handling a submit event from a form. In response, you’ll want to do multiple things. For example: RESET your form’s view model, POST your form’s data to the server, and also NAVIGATE to another route.

So should you dispatch separate actions for each of these behaviours, or instead dispatch a single action which is handled by each of the applicable reducers?

Continue reading →

Which Flux Implementation Should I Use With React?

So you’ve sifted through the seemingly infinite sea of JavaScript frameworks, and finally settled on React. But then you realise that React only solves half the problem, and everyone is now using Flux for the other half. But that’s ok — if Flux came from the same place as React, it should have a simple and easy-to-learn API, right?

Wrong.

Flux is like a framework for frameworks – frameworkception, as one redditor put it. There are as many implementations as there are opinions, all with their own strengths and weaknesses, and none of them with authority.

So what is a developer to do? Contribute to the malaise by rolling your own, like I did? Don’t do it! Instead, use Redux.

Wait, is it really that simple? Yes, it really is! But since you’re still reading, you’re probably not someone who is easily convinced. And that’s why I’ve prepared this comparison for you:

Continue reading →