Redux implementation using Elm for state and updates

Usage no npm install needed!

<script type="module">
  import aardito2Realm from 'https://cdn.skypack.dev/@aardito2/realm';



Realm is an alternate implementation of Redux using Elm. Actions are created in JavaScript with a payload, which is sent through ports into your Elm store. Elm performs the role of a reducer in Redux, and sends the new state back to JavaScript.



npm install @aardito2/realm

createStore(elmStore, initialState = {}, enhancer)

// using elm-webpack-loader
import elmStore from './store.elm';

const initialState = {};
const store = createStore(elmStore.Store, initialState);


See Redux docs.

createAction(actionType) => payload => action

const INCREMENT = 'increment';
const increment = createAction(INCREMENT);

const SET_STRING = 'set_string';
const setString = createAction(SET_STRING);




elm-package install @aardito2/realm

Your Elm file should be a Platform.programWithFlags. In main, your update should use Realm.updateState, which takes an outgoing port and an update function and returns a new update function which will automatically send your updated state back to JavaScript.

Your outgoing port will have the signature model -> Cmd msg. This port must be named nextState!

For each action used in JavaScript, two things are required:

  1. An incoming port with the same name as the action type.

  2. A subscription to the above port which converts the incoming action into a Msg to be handled by your update function.

See store.elm for a full example of the structure of the store in Elm.