redam

Tiny hoc for container.

Installation

yarn add react redam

Usage

import React from 'react'
import Redam from 'redam'

const initialState = { count: 0 }

const actions = {
  up: ({ state, payload, setState }) =>
    state('count')
    .then(count => setState({ count: count + payload.value }))
    .catch(err => console.error(err)),
    
  down: ({ state, payload, setState }) =>
    state('count')
    .then(count => setState({ count: count - payload.value }))
    .catch(err => console.error(err))
}

const Consumer = ({ provided, value }) =>
<main>
  <h1>{`count is ${provided.state.count}`}</h1>
  <button onClick={() => provided.dispatch('up', { value })}>
    {'+'}
  </button>
  <button onClick={() => provided.dispatch('down', { value })}>
    {'-'}
  </button>
</main>

const MyComponent = Redam(initialState, actions, Consumer)

export default MyComponent

import React from 'react'
import MyComponent from './MyComponent.js'

export default () =>
<div>
  <MyComponent value={10} />
  <MyComponent value={20} />
  <MyComponent value={30} />
</div>

API

Redam(initialState, actions, Consumer[, options])

Component is the result.

initialState

Set in every mount. prevState is passed after second mount if options.singleton: true.

// as object
const initialState = { [key]: value }
// as function
const initialState = (initialProps[, prevState]) => ({ [key]: value })

actions

{ [name]: action } or { [name]: action }[]. (name must be unique)

const action = (utils) => actionResult

utils

• props(key[, clone]): Promise<props[key]>
• state(key[, clone]): Promise<state[key]>
• setState(updater[, callback]): Promise<void>
• forceUpdate(callback): Promise<void>
• dispatch(actionName, payload): Promise<actionResult>
• payload: any

setState and forceUpdate return Promise for cancelable, but not be resolved until "didupdate". If hope so, need to pass Promise.resolve as callback.

const action = async ({ setState, forceUpdate }) => {
  await new Promise(resolve => setState(updater, resolve))
  await new Promise(resolve => forceUpdate(resolve))
}

Consumer

Component that is passed props containing provided (configable via options).

const Consumer = ({ provided, ...props }) => ReactNode

provided

• state
• dispatch (same as action's util)

options

• singleton: boolean = false
• providedKey: string = 'provided'

License

MIT (http://opensource.org/licenses/MIT)