redux-create-actions

redux-create-actions is a library that helps construct FSA compliant action creators and massively decreasing the amount of boilerplate necessary to generate constants and action creators.

Getting started

install

$ npm install --save redux-create-actions

or

$ yarn add redux-create-actions

Usage

Suppose we need to generate action creators and constants to filter loaded todos and also fetch remote todos

import { module, createAction, createAsyncAction } from 'redux-create-actions'
 
const {
  actions,
  constants 
} = module('@todos', {
  filterTodos: createAction('FILTER_TODOS'),
  fetchTodos: createAsyncAction('FETCH_TODOS')
})

The module block noted in the example above would return an object with a shape of

{
  constants: {
    'FILTER_TODOS': '@todos/FILTER_TODOS',
    'FETCH_TODOS': '@todos/FETCH_TODOS',
    'FETCH_TODOS_START': '@todos/FETCH_TODOS_START',
    'FETCH_TODOS_SUCCESS': '@todos/FETCH_TODOS_SUCCESS',
    'FETCH_TODOS_FAILURE': '@todos/FETCH_TODOS_FAILURE'
  },
  actions: {
    filterTodos: Fn,
    fetchTodos: Fn
      - fetchTodos.start: Fn
      - fetchTodos.success: Fn
      - fetchTodos.failure: Fn
  }
}

Documentation

createAction

createAction(actionType: string) -> ActionCreator

Utility function for generating action creators

ActionCreator = (payload, meta) -> { type, payload, meta }

createAsyncAction

createAsyncAction(actionType: string) -> AsyncActionCreator

Utility function for generating async action creators. This will output a function (action creator) with start, success, and failure invokable properties for ease of use.

AsyncActionCreator = ActionCreator
AsyncActionCreator.start = ActionCreator
AsyncActionCreator.success = ActionCreator
AsyncActionCreator.failure = ActionCreator
 

module

module(namespace: string, actions: Object) -> { constants, actions }

namespace optional string to scope actions generated by module. actions object of action creators

{
  filterTodos: createAction('FILTER_TODOS'),
  fetchTodos: createAsyncAction('FETCH_TODOS')
}

Motivation

Redux brought along many great things to the world of software development, unfortunately that came with a bit of extra boilerplate. While the boilerplate is manageable repeating the same code time and time again grows tiresome, especially when it comes to writing constants and action creators.

Take a usual file that exports constants and action creators for both sync and async actions.

const LOAD_POSTS = '@home/LOAD_POSTS'
const LOAD_POSTS_REQUEST = {
  START: '@home/LOAD_POSTS_REQUEST_START',
  SUCCESS: '@home/LOAD_POSTS_REQUEST_SUCCESS',
  FAILURE: '@home/LOAD_POSTS_REQUEST_FAILURE'
}
 
export const constants = {
  LOAD_POSTS,
  LOAD_POSTS_REQUEST
}
 
const loadPosts = ({ payload }) => ({ type: LOAD_POSTS, payload })
const loadPostsRequest = {
  start: ({ payload }) => ({ type: LOAD_POSTS_REQUEST.START, payload }),
  success: ({ payload }) => ({ type: LOAD_POSTS_REQUEST.SUCCESS, payload }),
  failure: ({ payload }) => ({ type: LOAD_POSTS_REQUEST.FAILURE, payload })
}
 
export const actions {
  loadPosts,
  loadPostsRequest 
}

Writing action creators and constants like this quickly becomes very tedious work, and that's where redux-create-actions comes in. The previous module would condense down to

import { module, createAsyncAction } from 'redux-create-actions'
 
const {
  constants,
  actions 
} = module('home', {
  loadPosts: createAsyncAction('LOAD_POSTS')
})

License

MIT