The Redux Pattern As a First-Class Citizen
(A Redux Developer’s Guide to Elm Basics)
Why Look at Elm?
Unlike Redux, Elm is a language, so it is able to benefit from many things like enforced purity, static typing, out of the box immutability, and pattern matching (using the case expression). Even if you don’t plan to use Elm, you should read about the Elm architecture, and play with it.
— From the Official Redux Guide Prior Art section
If You Know Redux, You Know The Elm Architecture!
The words in parens are the Redux equivalents of the Elm concept they are next to. This article describes these differences in more detail and compares the equivalent code in both.
If They’re The Same, Why Consider Elm?
There have been a lot of articles recently about moving away from Redux. The consensus seems to be that the Redux Pattern can make code more maintainable and reduce data synchronization bugs, but the cost is too high because it requires so much boilerplate. So many people are recommending using the same patterns without the Redux library itself (including Dan Abramov, the original author of Redux; see this post as well).
Comparing Elm and Redux
This guide is meant to bridge the gap and help you learn Elm by leveraging the knowledge you already have about Redux. We’ll compare basic Counter apps in both paradigms. This isn’t meant to be a comprehensive comparison, but rather a basic intro to the fundamentals.
Here are the full code examples used throughout this guide:
(The Redux example is in a single file for easy comparison; see this codesandbox for the same example split into multiple files).
Initializing and Updating State
⚛ Redux Reducers, 🌳 Elm
⚛ Redux Reducer
Notice that we have to have a default case in Redux. Since
action.type is just a string it could be anything. Often tools like TypeScript or Flow are used to help make sure we are handling each valid case and don’t have any typos or incorrect assumptions about the Redux event payloads.
Using just Vanilla Elm, the compiler gives you these guarantees. And there are no escape hatches like TypeScript’s
any type, so if your program runs you are guaranteed that there will be no unhandled cases or runtime exceptions.
⚛ Redux Actions, 🌳 Elm Messages (
⚛ Redux Actions
🌳 Elm Messages (
Notice that in Elm, there is no wiring to manually
dispatch actions as there is in Redux. In React,
onClick takes a function, so you manually wire it up to call
store.dispatch(...) in the function you pass to
onClick. Elm assumes an architecture where you the only thing you can do from an
onClick (or any other event) is dispatch an
Msg in Elm lingo). So this is simpler and less error prone in Elm. You just declaratively give an
onClick Increment and The Elm Architecture takes care of the wiring to dispatch the
Msg at the appropriate time. This is one of the big benefits of having the data architecture built into the language. It’s also type-safe, which you’ll appreciate a lot more when you’re working with a large scale app and not just a toy example like this! That guarantees that every
Msg has exactly the data you said it would, and that you have handled every possible
Msg (and only possible
Also notice that there is no need for anything like
PropTypes in Elm to give you warnings when you forget to pass fields or pass in the wrong data type. This is built with Elm’s famously helpful compiler and type system!
⚛ Redux JSX, 🌳 Elm Functions from the
That’s right, Elm doesn’t have
JSX or a special templating syntax. It’s just plain-old Elm functions! This is one of those features that bothers people when they first use Elm, and then they fall in love with it after a few weeks! And as for the commas at the start of each line, you’ll get used to that, too. Especially because you don’t have to do it manually,
elm-format does it for you whenever you save your code!
Built-In to Elm
People blame Redux, React, functional programming, immutability, and many other things for their woes, and I understand them.
— Dan Abramov (author of Redux), from You Might Not Need Redux
Have questions? Drop me a line, or sign up for my Elm for Redux Devs series!
Want to learn my 3 favorite things about Elm? Sign up for my Elm For Redux Devs mini-course below. You’ll get an email in your inbox that gives you some resources about libraries and features of the Elm language to look forward to!
Is your team curious about Elm? I train teams on Elm, and coach them through the transition from Redux to Elm to make sure it is smooth and successful. Say hello, or take a look at the free Elm intro sessions that we offer.
Thanks For Reading!
- What have been your stumbling blocks learning Elm?
- What do you love about what you’ve seen in Elm?
👇 Let me know in the comments below 👇
Did you know? 💡 If you learned something from this guide, you can give up to 50 claps! 👏