@fcannizzaro/react-use-redux-fast v1.0.0

@fcannizzaro/react-use-redux-fast

hooks and notation to use redux store and actions

Install

yarn add @fcannizzaro/react-use-redux-fast

Project Structure

.
+-- actions
|   +-- user.js
|   +-- ...
|   +-- ...
|   +-- index.js   # <- export actions
|
+-- app.js

Usage

• actions/user.js

// export action and bound initial state
export const setupProfile = {

  action: (state, profile) => ({...state, profile}),

  state: {
    profile: {
      username: 'default username'
    }
  }

}

// export action without any initial state
export const setupValue = (state, value) => ({...state, value})

• actions/index.js

export * from './user';

• app.js

import {FastReduxProvider, useActions, useStates} from '@fcannizzaro/react-use-redux-fast'
import React from 'react'

const id = () => Math.round(Math.random() * 100)

const InternalComponent = () => {

  // ready to use as dispatched actions
  const {setupProfile, setupValue} = useActions()

  // store values
  const {profile, value} = useStates('profile', 'value')

  return <div>

    <div>
      <button onClick={() => setupProfile({username: 'username#' + id()})}>
        SET RANDOM USERNAME
      </button>
      <div><b>{profile.username}</b></div>
    </div>

    <div>
      <button onClick={() => setupValue(id())}>
        SET A NEW VALUE
      </button>
      <div><b>{value}</b></div>
    </div>

  </div>

}

export default () => {
    // require or import actions directory (module like)
    return <FastReduxProvider bundle={require('./actions')}>
        <InternalComponent />
    </FastReduxProvider>
}

Hooks

useActions()

return an object with dispatchable actions.

useStates(...keys)

return store's values of required keys.

useState(key [, defaultValue, transform: function])

obtain a single store value, with default value and/or applying a transform function (value) => transform(value).

License

MIT © fcannizzaro