purescript-mini-redux
An idiomatic PureScript mini-interface to Redux.
Why?
Because I want to work with Redux in an idiomatic way inspired by purescript-redux-utils
, but in a more lightweight and less intrusive fashion. Store creation is still handled by your imperative code, but reducers and actions are defined in your PureScript modules, and thus they are strictly typed and purely functional.
This approach is inspired by the "functional core, imperative shell" strategy made popular by the Destroy All Software talk, Boundaries.
Usage
Install with bower:
$ bower install --save purescript-mini-redux
Define your root reducer and initial state with PureScript (only for this example - you can actually compose PureScript and plain JavaScript reducers any way you like):
module MyApp.State.Store (rootReducer, initialState) where import Control.Monad.Eff (Eff)import MyApp.State.MyReducer (State, initialState, reducer) as MyReducerimport Redux.Mini (Store, STORE, ReduxReducer, combineReducers) rootReducer :: forall action state. ReduxReducer action staterootReducer = combineReducers { myReducer: MyReducer.reducer } initialState :: { myReducer :: MyReducer.State }initialState = { myReducer: MyReducer.initialState }
Define your child reducers in PureScript as well:
module MyApp.State.MyReducer ( Action(..) , State , setMyValue , initialState , reducer ) where import Preludeimport Redux.Mini (Action) as Reduximport Redux.Mini (Reducer, ReduxReducer, createAction, createReducer) type State = { myValue :: String } -- Actions --------------------------------------------------------------------- data Action = Set String | Else -- Represents external actions setMyValue :: String -> Redux.Action ActionsetMyValue value = createAction $ Set value -- Reducer --------------------------------------------------------------------- initialState :: StateinitialState = { myValue: "" } myReducer :: Reducer Action StatemyReducer (Set value) state = state { myValue = value }myReducer _ state = state reducer :: ReduxReducer Action Statereducer = createReducer myReducer initialState
Then create your store with JavaScript:
/* MyApp/State/Create.js */ { if typeof window === 'object' && typeof windowdevToolsExtension !== 'undefined' return window return id} { const enhancers = const store = Redux return store}
Now, you can call your createStore function and pass it an optional initialState value:
const store = const element = <Provider store=store> <div>My awesome component is awesome!</div> </Provider>
API Documentation
License
MIT