You Might Not Need Redux
Choojs already has a state system similar to redux (see choo.use and the emitter)
I made this because I want to benefit from the redux ecosystem with choo but in most cases this is not needed!

Install

npm install choo-redux -S

Usage

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

FAQs

What is choo-redux?

Is choo-redux popular?

Is choo-redux well maintained?

Last updated on 18 Oct 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install