@reduxed/actions

Provides helper for managing Redux state

Written in Typescript and includes types

More features to come (WIP)

Part of @reduxed utilities for Redux.

Assumes the use of redux-actions and reselect

Table of Contents

• Installation
• Usage

Installation

$ yarn add @reduxed/actions

or

$ npm i -S @reduxed/actions

The npm package provides a CommonJS build, a UMD build, as well as an AMD build.

Usage

Component

Binding your redux store to a component with separate actions props and state props:

import { connect } from '@reduxed/actions'

export default connect(mapStateToProps, mapDispatchToProps)

connect is used the same way as connect from react-redux

state will be accessible in the component via input prop and actions via output props:

export default ({ input, output }) => (
  //Component
)

Selector

Create wrapper selectors for a named reducer:

• inputs: parent selector, object containing root selector functions
• output: object containing selectors children of parent selector with key: selector name, value: selector function
• */

import { createSelector } from 'reselect'
import { createWrapperSelectors } from '@reduxed/actions'
   
const getFriend = ({ friend }) => friend
   
const parentSelector = createSelector(state => state, getFriend)
   
const selectors = {
  getFirstName: ({ firstName }) => firstName,
  getLastName: ({ lastName }) => lastName
}
   
const namedSelectors = createWrapperSelectors(parentSelector, selectors)
   
const {
  getFirstName,
  getLastName
} = namedSelectors

Create selectors from state props

import { createSelector } from 'reselect'
import { createSelectors } from '@reduxed/actions'
   
const getFriend = ({ friend }) => friend
   
const parentSelector = createSelector(state => state, getFriend)
   
const props = [
  'firstName',
  'lastName'
]
   
const selectors = createSelectors(parentSelector, props)
   
const {
  getFirstName,
  getLastName
} = selectors

Actions

Create named actions:

import { createActions } from 'redux-actions'
import { createWrapperActions } from '@reduxed/actions'
   
const creators = createActions('CHANGE_FIRSTNAME', 'CHANGE_LASTNAME')
   
const wrapperCreators = createWrapperActions(creators, 'best')
   
const {
  changeFirstName,
  changeLastName
} = wrapperCreators

Combine actions for use in a reducer:

import { createActions } from 'redux-actions'
import { combineWrapperActions } from '@reduxed/actions'
   
const creators = createActions('CHANGE_FIRSTNAME', 'CHANGE_LASTNAME')
   
const combinedActions = combineWrapperActions(creators)
   
const reducer = handleActions({
[combinedActions]: state => ({ ...state })
}, {})

Reducer

Create a higher order reducer combining multiple reducers:

import { createActions } from 'redux-actions'
import { createReducer } from '@reduxed/actions'

const {
  changeFirstName,
  changeLastName
} = createActions('CHANGE_FIRSTNAME', 'CHANGE_LASTNAME')
   
const reducer = handleActions({
[changeFirstName]: (state, { payload }) => payload
}, {})
   
const wrapperReducer = createReducer({
[changeLastName]: (state, { payload }) => ({ lastName: payload })
}, {
  firstName: 'John',
  lastName: 'Doe'
}, {
  firstName: {
    actions: { changeFirstName },
    reducer
  }
  // could contain other reducers
})

Get initial state from a reducer:

import { createAction } from 'redux-actions'
import { getInitialState } from '@reduxed/actions'
   
const changeLastName = createAction('CHANGE_LASTNAME')
   
const reducer = handleActions({
  [changeLastName]: (state, { payload }) => ({ lastName: payload })
}, {
     lastName: 'Doe'
 })
   
 getInitialState(reducer) // => { lastName: 'Doe' }

Create a reducer responding to given named actions:

import { createActions } from 'redux-actions'
import {
  createWrapperActions,
  createWrapperReducer
} from '@reduxed/actions'
  
const creators = createActions('CHANGE_FIRSTNAME', 'CHANGE_LASTNAME')
 
const { changeLastName } = creators 
 
const reducer = handleActions({
  [changeLastName]: (state, { payload }) => ({ lastName: payload })
}, {
  firstName: 'John',
  lastName: 'Doe'
})
  
const namedActions = createWrapperActions(creators, 'friend')
  
const namedReducer = createWrapperReducer({ actions: namedActions, reducer })

namedReducer({ lastName: 'Doe' }, namedActions.changeLastName('Dupont')) // => { lastName: 'Dupont' }