The joy of React+Redux with Elixir/OTP

The joy of React+Redux with Elixir/OTP  #ReactJS #Redux #Elixir

  • Graphically, this is the schema of a Redux app: – – Basically, Redux does the following: – – An OTP GenServer does the following: – – In short, we can use the same mental model for the client and server side.
  • We can dispatch events to Elixir, compute a new version state server side, propagate this state to redux, and our views will get updated automatically.
  • We have just implemented the thick red arrows: – – We will update the store with the state that comes from the server in two different situations.
  • With this, we have connected the server state with Redux state.
  • But, if you want to have state shared between different users, or we want to have pieces of the state in the server for other reasons, such as enforcing validation rules, we can use the same mental mode with Elixir GenServers.

Digital solutions partner. High quality work with Symfony, React and Elixir.

Our experience combining Elixir with React has been great and fruitful. They share similar paradigms and make you think about state as source of truth and functional programming.

There is a particular case where they really shine when used together, which is when you combine a React+Redux client with an Elixir GenServer. Graphically, this is the schema of a Redux app:

Basically, Redux does the following:

Views dispatch an action.

Reducers process the action. Based on it and the current state a reducer produces a new version of the state.

Once the state is updated, it is propagated to the views that are connected to (slices of) the state.

An OTP GenServer does the following:

An event is dispatched to the server. It can be either synchronous (call) or asynchronous (cast).

Callbacks process the event. Based on on it and the current state a callback produces a new version of the sstate.

And optionally:

Once the state is updated, it can be optionally propagated to subscribers using for instance websockets if we have a PubSub mechanism like the one that ships with Phoenix the Elixir framework.

Graphically:

In short, we can use the same mental model for the client and server side.

The combination feels natural. We can dispatch events to Elixir, compute a new version state server side, propagate this state to…

The joy of React+Redux with Elixir/OTP