redux-create-actions
v1.0.0
Published
Redux action creator building utilities
Downloads
4
Maintainers
Readme
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')
})