Skip to content

soyuka/choo-redux

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

choo-redux

Redux bridge for choojs.

Disclaimer

  1. You Might Not Need Redux
  2. Choojs already has a state system similar to redux (see choo.use and the emitter)
  3. 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

About

Choo redux bridge

Resources

Code of conduct

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published