@app-elements/use-actions

useActions let's you define actions and add their reducer to your store from a Component. It only adds the reducer if it hasn't already been added.

Usage no npm install needed!

<script type="module">
  import appElementsUseActions from 'https://cdn.skypack.dev/@app-elements/use-actions';
</script>

README

useActions

useActions let's you define actions and add their reducer to your store from a Component. It only adds the reducer if it hasn't already been added.

Installation

npm install --save @app-elements/use-actions

Usage

import { useActions } from '@app-elements/use-actions'
import createStore from 'atom'

const store = createStore([], { dropdown: null })

function MyComponent () {
  const { toggle } = useActions(this.context.store, {
    toggle: ({ dropdown }, uid) => {
      const isOpen = dropdown != null && dropdown === uid
      return { dropdown: isOpen ? null : uid }
    }
  }, 'MyComponent')
  return (
    <div>
      <button onClick={toggle('MyDropdown')}>Toggle Dropdown</button>
    </div>
  )
}

Props

Prop Type Default Description
store Object None An (atom) store instance
actions Object None Your action definitions. Each key will be returned by the useActions call. And, each value should be a function that always accepts the current state as the first param adn returns a partial state object to be applied.
componentName String None A string name for the calling component. This gets passed as a meta property to help with debugging in redux dev tools.