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

DEPRECATED In nexts versións, subStores would reside in their own library, because it is growing in complexity and features Use with caution Not tested, not stable. New version might be quite different.

to decouple more and better.

You will see the actions in redux devTools as __/key/type

import { subStore } from 'reduxplus'

const sub = subStore('foo.bar')

sub.getState() // returns {foo: { bar: THIS } }
sub.useRedux('buz') // like useRedux('foo.bar.buz')
sub.useRedux() // like useRedux('foo.bar')
sub.subscribe(listener) // Only called when some {foo: {bar: HERE }} changes
sub.hydrate(state) // set the value of {foo: { bar: THIS } }
sub.dispatch(action) // action that only is procesed by the reducers of this sub
sub.dispatch({type: 'someType', ...})
sub.setReducer(reducer) // reducer that only affects {foo: {bar: HERE }}
sub.subStore('tra.ree') // returns a subSubStore
sub.clean() // cleans up the sub's subscriptions and reducers
sub.clean(true) // cleans up the sub's subscriptions, reducers, and data

test

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