Redux helpers for actions and reducers


Keywords
redux, redux-actions, redux-reducers, redux-helpers, redux-thunk
License
ISC
Install
npm install redux-code@0.2.0

Documentation

redux-code

Tests Build npm version

A simple set of tools to make using Redux easier

Features:

  • createReducer -- A utility to create reducers (with immer support)
  • createActions -- A utility to create actions (with thunk, promises support)
  • skipMiddleware -- A Redux middleware to add ability to skip actions

Installation

npm install --save redux-code

Usage

createActions

import {createActions} from 'redux-code'

const actions = createActions('prefix:', {

    // Basic action creator without payload
    increment: undefined,

    // Basic action creator with payload
    decrement: true,

    // Basic action creator with custom payload
    update: (num) => num,

    // You may call other actions as well
    random: () => (Math.random() < 0.5 ? actions.increment() : actions.decrement()),
})

// Call creators to build actions
expect(actions.increment()).toEqual({ type: 'prefix:increment' })
expect(actions.decrement()).toEqual({ type: 'prefix:decrement', payload: true })
expect(actions.update(42)).toEqual({ type: 'prefix:update', payload: 42 })
expect([actions.increment(), actions.decrement()]).toContainEqual(actions.random())

// Get action types
expect(actions.increment.type).toBe('prefix:increment')
expect(actions.decrement.type).toBe('prefix:decrement')
expect(actions.update.type).toBe('prefix:update')

Promises and thunks

import {SKIP} from 'redux-code'

const actions = createActions('thunk:', {
    
    // Just an update action
    update: (payload) => payload,

    // Use redux-thunk
    init: (dispatch, getState) => {
        const state = getState()
        if (state.inited) return SKIP
        return actions.update({inited: true})
    },

    // Promises also supported
    load: async () => {
        // Just pretend we have an IO call here
        const res = await Promise.resolve(Math.random() * 100 + 1)
        return res
    }

})

store.dispatch(actions.init())
await store.dispatch(actions.load())

Mixins

You may create and use mixins with different actions.

const UpdateMixin = {
    update: (payload) => payload
}

const DisableMixin = {
    // Pay attention that we don't use arrow function here to allow redux-code bind this to a created actions
    disable: async function(dispatch) {
        this.update({disabled: true})
        await self.save()
    }
}
const usersActions = createActions('users/', UpdateMixin, DisableMixin, {
    save: async () => {
        // ...
    }
})
const commentsActions = createActions('comments/', UpdateMixin, DisableMixin, {
    save: async () => {
        // ...
    }
})

expect(usersActions.disable.type).toEqual('users/disable')
expect(commentsActions.disable.type).toEqual('comments/disable')

createReducer

Basic Usage

Simplifying Reducers with createReducer:

import { createReducer } from 'redux-code'

const initial = 42

// instead this
const oldReducer(state=initial, action) {
    switch(action.type) {
        case 'increment':
            return state + 1
        case 'decrement':
            return state - 1
        default:
            return state
    }
}

// Write this
const newReducer = createReducer(initial, {
    // Map actions types to handlers
    increment: (state, action) => state + 1,
    decrement: (state, action) => state - 1,
})

Internally createReducer uses Immer library, which lets you write code that "mutates" some data, but actually applies the updates immutably.

Using with createActions

Sure you may use createActions with the createReducer together

    const actions = createActions('counter/', { increment: undefined, decrement: undefined })

    const reducer = createReducer(initial, {
      [actions.increment]: (state, action) => state + 1,

      // For typescript use `action.type`
      [actions.decrement.type]: (state, action) => state - 1,
    })

Mixins

You may create and use mixins with your reducers.

// Common Reducer, supports reset (reset state) and update (update state with the given payload) actions
const CommonMixinCreator = (initial, actions) => ({
    [actions.reset.type]: (state) => initial,
    [actions.update.type]: (state, { payload }) => ({ ...state, ...payload }),
})

const actions = createActions('users/', {
    reset: true,
    update: (payload) => payload,
    load: () => {
        // ...
    }
})

const initial = {}

// Create a reducer with your mixin
const reducer = createReducer(initial, CommonMixinCreator(initial, actions), {
    // Only define new actions
    [actions.load.type]: (state) => ({ ...state, loaded: Date.now() }),
})

let state = reducer(initial, actions.update({ data: 42 }))
expect(state).toEqual({ data: 42 })
state = reducer(state, actions.reset())
expect(state).toBe(initial)

skipMiddleware

You may use skipMiddleware with SKIP action to (surprise) skip some actions. Just return SKIP from actions creators every where you want to skip.

import { SKIP, skipMiddleware } from 'redux-code'

// .. Add skipMiddleware to your store

const initial = {}

const actions = createActions('example/', {

    // The actions is skipable by an condition
    conditionalAction: () => {
        // Skip the action
        if (Math.round() < 0.5) return SKIP
        // Or do it as well
        return true
    }

})

Mixins

The package includes some mixins for actions and reducers

Common

import {commonActions, commonReducer} from 'redux-code'

const actions = createActions('example/', commonActions, {
    // .. your other action creators here
})
const reducer = createReducer(initial, commonReducer(actions, initial), {
    // .. your other actions handlers here
})

// commonActions, commonReducer supports such actions as:
// * reset -- to reset your reducer state
// actions.reset()

// * update -- to update your reducer state from the provided payload
// actions.update({'updates': 'here'})

License

This project is licensed under the MIT license, Copyright (c) 2017 Kirill Klenov. For more information see LICENSE.md.

Acknowledgements

Dan Abramov for Redux