Elm is a functional programming language that compiles and runs in the browser. Elm is inspired by Haskell.

Redux is a predictable state container for JavaScript apps.

→ Both deal with Javascript

→ Both are young technologies(Elm, 2012 — Redux, 2015)

→ They have (action, state) => state as property

→ Elm “updaters” have the same purpose as reducers in Redux

Reactive Programming

Probably you have heard about it and you think it's quite difficult or advanced. It's basically: Programming with Event streams. What is this? One event can happen over the time, whenever an event happens we can react by doing something.

Being more pragmatic, it's a declarative programming paradigm for working with mutable values. In FRP, mutable values as time-varying values are called Signals. Signals can represent any mutable value. Signals can also be mixed/composed.

(V,U) = View, Update

If you have heard about ReactJS, we might say, ReactJS is only the VIEW part of Reactive Programming. Elm is definitely Reactive Programming.

Elm Architecture

The logic of every Elm program can be break into three cleanly separated parts:

model

update

view

Let’s see how a simple Counter would be implemented using Elm and Redux. I'm using the Counter implemented by Redux Example Counter and Elm Counter.

Elm Counter

Let's divide in three components:

Model: An Integer

Update: A function which has two types: Increment and Decrement.

View: Some HTML code for rendering.

Redux + ReactJS Counter

Model: An Integer

Update: A Reducer Function.

View: A ReactJS Component.

Reducer Function:

Reducer — Counter

View Part — A simple ReactJS Component:

Studying Elm

Studying Redux