Package Exports

@hacknlove/reduxplus

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@hacknlove/reduxplus) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

reduxplus

Decoupled redux, for react functional components.

Example

import React from 'react'
import ReactDOM from 'react-dom'
import store from 'reduxplus'

store.hydrate({
  worldName: 'world'
  foo: {
    bar: {
      buz: 42
    }
  }
})

store.setReducer((state, action) => {
  if (action.type !== 'setWorld') {
    return state
  }
  return {
    ...state,
    worldName: action.worldName
  }
})

function Example () {
  const worldName = store.useRedux('worldName')
  const theMeaningOfLife = store.useRedux('foo.bar.buz')

  return (
    <h1>Hello {world}</h1>
    <h2>The meaning of life is {theMeaningOfLife}</h2>
    <button onClick={() => store.dispatch({
      type: 'setWorld',
      worldName: 'Earth'
    })}>World's name</button>
  )
}

ReactDOM.render(
  <Example/>,
  document.querySelector('#root')
)

API

`store`

The redux store

`setReducer(reducer)`

Adds a new reducer to the store

`setMiddleware(middleware)`

Adds a new middleware to the store

`useRedux(key?)`

key can be dot-composed

const data = useRedux() // returns store.getState() and actualizes the component when data changes

const foobar = useRedux('foo.bar') // returns store.getState().foo.bar, and actualizes the component when that value changes

hydrate(state, replace = false)

Set the store value

// store.getValue() -> {foo: 'bar'}

hydrate({
  buz: 42
})

// store.getValue() -> {foo: 'bar', buz: 42}

hydrate({import { store, setReducer, setMiddleware, useRedux, hydrate } from 'reduxplus'

  foo: 'foooo'
})

// store.getValue() -> {foo: 'foooo', buz: 42}

hydrate({
  bar: 40
}, true)

// store.getValue() -> {bar: 42}

subStores

See @hacknlove/substore

test

git clone https://github.com/hacknlove/reduxplus.git
cd reduxplus
npm i
npm test