Registry / web-framework / redux-elm-middleware

redux-elm-middleware

library4.0.0jsnpmunverified

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.

web-framework

npm install redux-elm-middleware

github ↗package ↗

INSTALL

IMPORT

SIG · REDUX-ELM-MIDDLEWA

redux-elm-middleware

web-frameworkjavascriptv4.0.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createElmMiddleware

✓ import createElmMiddleware from 'redux-elm-middleware'

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

Default export via ES modules.

reducer

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

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

Named export for the Elm reducer used in combineReducers.

Redux

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

✗ import Redux from 'redux-elm-middleware'

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

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);

Debug

Known issues

gotchaElm 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.

affects: <=4.0.0

deprecatedNo 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.

affects: <=4.0.0

breakingInitialization 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.

affects: <=4.0.0

Errors

Common errors & fixes

Cannot find module 'redux-elm-middleware'

Package not installed or missing from node_modules.

fix

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

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

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.

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

Missing elmReducer in combineReducers or reducer mapping not set up.

fix

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

Upgrade

Version history

4.0.0latest on npm

Audit

Dependencies

reduxrequiredPeer dependency for Redux store integration

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/stoeffel/redux-elm-middleware ↗

packagehttps://www.npmjs.com/package/redux-elm-middleware ↗