redux-elm-middleware

4.0.0 verified Sat May 09 auth: no javascript maintenance

Elm middleware for Redux that enables using Elm reducers within a Redux/React app. Version 4.0.0 is stable but appears to be in maintenance mode with no recent updates. It allows embedding Elm business logic in a Redux store, handling state and effects purely via Elm's update function while keeping access to the React/Redux ecosystem. Alternatives: use Elm directly for the whole app or use port-based communication without this middleware.

Common errors

error Cannot find module 'redux-elm-middleware' ↓

cause Package not installed or missing from node_modules.

fix

Run 'npm install redux-elm-middleware' or 'yarn add redux-elm-middleware'.

error Uncaught Error: Elm worker not found. Make sure the Elm module name matches the worker. ↓

cause Elm worker name does not match the module name; expected 'Reducer'.

fix

Check that your Elm root reducer is named 'Reducer' and compiled to the output file imported as Elm.

error Action type '@@elm/...' not recognized by reducers. ↓

cause Missing elmReducer in combineReducers or reducer mapping not set up.

fix

Add 'elm: elmReducer' to combineReducers and ensure actions are dispatched correctly.

Warnings

gotcha Elm impure ports expected: subscriptions must use port modules and import Redux module from source. ↓

fix Ensure your Elm file is a port module and add 'node_modules/redux-elm-middleware/src' to elm-package.json source-directories.

deprecated No longer actively maintained; last release 2018. May have compatibility issues with newer Elm and Redux versions. ↓

fix Consider using Elm ports directly or switching to a more modern integration library like 'elm-redux' or writing custom ports.

breaking Initialization requires calling run(store) after createStore; missing run will cause store to be undefined. ↓

fix Invoke run(store) after creating the store as shown in the documentation.

Install

npm install redux-elm-middleware

yarn add redux-elm-middleware

pnpm add redux-elm-middleware

Imports

createElmMiddleware

wrong

const createElmMiddleware = require('redux-elm-middleware')

correct

import createElmMiddleware from 'redux-elm-middleware'

Default export via ES modules.

reducer

wrong

const reducer = require('redux-elm-middleware').reducer

correct

import { reducer } from 'redux-elm-middleware'

Named export for the Elm reducer used in combineReducers.

Redux

wrong

import Redux from 'redux-elm-middleware'

correct

import Redux from 'redux-elm-middleware/src/Redux.elm' (or via elm-package.json source-directories)

The Elm module 'Redux' is part of the source and must be imported via Elm tooling, not via npm import.

Quickstart

Configures Redux store with elm middleware, creates an Elm worker, and runs the middleware to connect Elm's state to Redux.

import createElmMiddleware from 'redux-elm-middleware';
import { reducer as elmReducer } from 'redux-elm-middleware';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import Elm from '../build/elm';

const rootReducer = combineReducers({
  elm: elmReducer,
  // ... other reducers
});

const elmStore = Elm.Reducer.worker();
const { run, elmMiddleware } = createElmMiddleware(elmStore);

const store = createStore(
  rootReducer,
  {},
  compose(
    applyMiddleware(elmMiddleware),
    window.devToolsExtension ? window.devToolsExtension() : f => f
  )
);

run(store);