redux-code

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
• persistReducer, persistStore -- Make state persistent

Installation

npm install --save redux-code

Usage

createActions

A helper to build actions creator.

import {createActions} from 'redux-code'

const actions = createActions('prefix/', {

    // Basic action creator without payload
    action1: undefined,

    // Basic action creator with static payload
    action2: true,

    // Basic action creator with dynamic payload
    action3: (num) => num,

    // You may return other actions as well
    random: () => (Math.random() < 0.5 ? actions.action1() : actions.action2()),
})

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

// Get action types
expect(actions.action1.type).toBe('prefix/action1')
expect(actions.action2.type).toBe('prefix/action2')
expect(actions.action3.type).toBe('prefix/action3')

You may also pass an array of strings to create simple actions

const actions = createActions('prefix/', ['init', 'update'])

expect(actions.init()).toEqual({type: 'prefix/init'})
expect(actions.update(42)).toEqual({type: 'prefix/update', payload: 42})

Promises and thunks

Redux-Code supports redux-thunk actions as well as async actions.

import {SKIP} from 'redux-code'

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

    // Use redux-thunk (return function)
    init: () => (dispatch, getState) => {
        const state = getState()
        if (!state.inited) dispatch(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, ['another1', 'another2'], {
    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.

Create reducer without immer

The library provides method createBaseReducer which one doesn't use immer internally.

import { createBaseReducer } from 'redux-code'

const initial = 42

const reducer = createBaseReducer(initial, {
    // Map actions types to handlers
    increment: (state, action) => state + 1,
    decrement: (state, action) => state - 1,
})

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'})

Entities

import {entitiesActions, entitiesReducer} from 'redux-code'

const actions = createActions('base/', entitiesActions, {
    // .. your other action creators here
})
const reducer = createReducer(initial, entitiesReducer(actions), {
    // .. your other actions handlers here
})

// entitiesActions supports such actions as:
// * addOne -- to add an entity
// * addMany -- to add many entities
// * updateOne -- to update an entity
// * updateMany -- to update many entities
// * upsertOne -- to add/update an entity
// * upsertMany -- to add/update many entities
// * setOne -- to add/set an entity
// * setMany -- to add/set many entities
// * setAll -- to replace all entities
// * removeOne -- to remove an entity
// * removeMany -- to remove many entities
// * removeAll -- to remove all entities

persistReducer

import {commonActions, commonReducer, persistReducer, persistStore} from 'redux-code'
import {localStorage} from 'redux-core/persist'

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

const store = createStore(reducer, {})
const persistor = persistStore(store)

// State will be persisted in localStorage
store.dispatch(actions.update({value: 42}))

// Pause persistence for the storeKey
persistor.pause()

// Resume persistence for the storeKey
persistor.persist()

// Purge data
persistor.purge()

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