Get support for soyuka/choo-redux

If you're new to LTH, please see our FAQ for more information on what it is we do.

Support Options

Unfortunately, there are currently no active helpers for this repository on the platform. Until they become available, we reccomend the following actions:

View Open Issues

Take a look to see if anyone else has experienced the same issue as you and if they managed to solve it.

Open an Issue

Make sure to read any relevant guidelines for opening issues on this repo before posting a new issue.

Sponsor directly

Check out the page and see if there are any options to sponsor this project or it's developers directly.

soyuka/choo-redux

View on github

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
Our Mission

We want to make open source more sustainable. The entire platform was born from this and everything we do is in aid of this.

From the Blog
Interesting Articles
Company

Thank you for checking out LiveTechHelper |
2025 © lth-dev incorporated

p-e622a1a2