choo-redux
v1.0.1
Published
Redux bridge for choojs.
Downloads
4
Readme
choo-redux
Redux bridge for choojs.
Disclaimer
- You Might Not Need Redux
- Choojs already has a state system similar to redux (see
choo.useand theemitter) - I made this because I want to benefit from the
reduxecosystem withchoobut in most cases this is not needed!
Install
npm install choo-redux -SUsage
const { createStore, applyMiddleware } = require('redux')
const { patchRouter, chooMiddleware, changeDOMTitle } = require('choo-redux')
const choo = require('choo')
const html = require('choo/html')
const reducer = function (state = {}, action) {
switch (action.type) {
default:
return state
}
}
const app = choo()
const store = createStore(reducer, applyMiddleware(chooMiddleware(app)))
patchRouter(app, store)
app.route('/', mainView)
function mainView (state, dispatch) {
if (state.title !== TITLE) dispatch(changeDOMTitle(🚂🚋🚋))
return html`
<body>
<h1>Choo choo!</h1>
</body>
`
}Under the hood
chooMiddleware
It propagates native choo events (eg: render, 'DOMTitleChange' etc.) from redux through nanobus (the choo event emitter).
This means that dispatching a render action will call emit('render') in choo:
const {render} = require('choo-redux')
// somewhere in the code, trigger choo rendering:
dispatch(render())If you want to render as side-effect on an action, use {render: true} in the action:
function customAction(payload = {}) {
return {type: CUSTOM_ACTION, render: true, payload}
}
dispatch(customAction)patchRouter
The patchRouter allows to use redux state and the dispatch method inside views.
Indeed, the view now gets store.getState() and dispatch instead of the initial state and emit arguments:
/**
* Note that the state is actually:
* Object.assign({}, state, store.getState())
*/
app.route('/', function mainView (state, dispatch) {
// dispatch a redux action:
dispatch(Action({payload: 'foo'}))
})API
The following action creators are available:
changeDOMTitle(title: string): {type: CHANGEDOMTITLE, payload: string}
render(): {type: RENDER}
pushState(route: string): {type: PUSHSTATE, payload: string}
replaceState(route: string): {type: REPLACESTATE, payload: string}
popState(route: string): {type: POPSTATE, payload: string}Every choo native events have associated types which are exported as:
const {types} = require('choo-redux').types