redux-elm-plugin
v1.0.3 redux elm middleware plugin
redux-elm-plugin
Utility package for wrapping Elm application ports into Redux actions and reducers.
The plugin exports the following members from a given Elm app:
- Specified incoming ports as action creators.
- Reducer that updates store's state with Elm's state.
- Middleware that routes actions to/from Elm app's ports.
Install
npm install --save redux-elm-plugin
Usage
import * as elmPlugin 'redux-elm-plugin'
const { actions, reducer, middleware } =
elmPlugin.app(elmApp, [actionNames], [options])
Options
// Default options:
{
// Application name to be used for Redux action types.
// ex. "elm/UPDATED"
name: 'elm',
// Port name to which the plugin should subscribe to for state
// updates.
subscribe: 'updated'
}
Example
JavaScript
import { createStore, applyMiddleware } from 'redux'
import * as elmPlugin from 'redux-elm-plugin'
import Elm from './Counter.elm' // or window.Elm
const counter = elmPlugin.app(
Elm.Counter,
[
// matching incoming port name
'increment'
]
)
const store = createStore(
counter.reducer,
// initial state will be provided as flags to the Elm application
{
value: 1
},
applyMiddleware(
// required for routing actions to/from Elm ports
counter.middleware
)
)
store.dispatch(
counter.actions.increment()
)
Elm
port module Counter exposing (main)
import Json.Decode
import Platform
main : Program Model Model Msg
main =
Platform.programWithFlags
{ init = init
, update = update
, subscriptions = subscriptions
}
-- Invoked when increment action is dispatched through Redux store
port increment : (() -> msg) -> Sub msg
-- Updates Redux state with new value
port updated : Model -> Cmd msg
type alias Model =
{ value : Int
}
type Msg
= Increment
init : Model -> ( Model, Cmd Msg )
init model =
( model, Cmd.none )
subscriptions : Model -> Sub Msg
subscriptions model =
increment (always Increment)
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Increment ->
let
newModel =
{ model | value = model.value + 1 }
in
( newModel, updated newModel )
Individual creator functions
Actions, reducer and middleware can be created individually as follows:
action(name [, options])
const increment = elmPlugin.action('increment')
actions(names [, options])
const actions = elmPlugin.actions([
'increment',
'multiply'
])
actionsFromPorts(ports [, options])
const app = Elm.App.worker()
const actions = elmPlugin.actionsFromPorts(app.ports)
reducer([options])
const reducer = elmPlugin.reducer()
middleware(app [, options])
const middleware = elmPlugin.middleware(Elm.App)
npm i redux-elm-plugin
Metadata
- MIT
- Whatever
- Ulisses Bini de Paiva Alves
- released 10/17/2017