Redux Actions - Without declaring CONSTANTS and action-creator functions for each action

Actions Creator

You can find the full documentation on the https://actions-creator.js.org

Description

actions-creator is an awesome javascript package that allows you to dynamically create action objects in Redux without having to declare CONSTANTS and separate action-creator functions for each action.

Installation

npm install actions-creator

Usage Example

import {actionsCreator} from 'actions-creator'

const action_1 = actionsCreator.MY.FIRST.ACTION('arg1')
//      {
//          type: 'MY/FIRST/ACTION',
//          payload: 'arg1',
//      } 

const action_2 = actionsCreator.This.is.my.second.action(2021)
//      {
//          type: 'This/is/my/second/action',
//          payload: 2021,
//      } 


// To get the type of action
String( actionsCreator.MY.FIRST.ACTION ) // 'MY/FIRST/ACTION'
// or
actionsCreator.MY.FIRST.ACTION().type // 'MY/FIRST/ACTION'

Actions With Callback

Sometimes we need the action to have callback capability. It might be necessary in many cases.

Actions Creator allows us to do this in a beautiful way:
When we try to generate an action object, we can pass the callback function as the last argument. Actions Creator will check and if the last argument is a function, it will be considered as a callback function.

import {actionsCreator} from 'actions-creator'

const callback = () => {
    console.log('Hello, I am callback!!!')
}

const action = actionsCreator.MY.CALLBACKABLE.ACTION(123, callback)
//      {
//          type: 'MY/CALLBACKABLE/ACTION',
//          payload: 123,
//          cb: [Function callback],
//      }

action.cb() // 'Hello, I am callback!!!'

Syntax

actionsCreator.ANY.ACTION(payload, callback?)

• payload <Any> Any value as a payload.
• callback <Function> Any function as a callback.

Returns <Object>

• type <String> Action type as a string.
  

  actionsCreator.ANY.ACTION().type === 'ANY/ACTION' // true
  

• payload <Any>
  
  The value of the payload - given in the first argument.
  

  actionsCreator.ANY.ACTION(123).payload === 123 // true
  

• cb <Function>
  
  The function of the callback - given in the last argument.
  

  const callback = () => {};
  
  actionsCreator.ANY.ACTION(123, callback).cb === callback // true
  

Documentation

• Actions Creator
• Customization

Links

• GitHub
• NPM
• Twitter

Comments

[Gustavo Scarpim]

Nice!

[Mark Erikson]

Pretty sure this has come up in prior threads, but:

the right answer is to use our official Redux Toolkit package and its createSlice API, which automatically generates action creators for each case reducer function that you write:

import { createSlice } from '@reduxjs/toolkit'

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    todoAdded(state, action) {
      state.push({
        id: action.payload.id,
        text: action.payload.text,
        completed: false
      })
    },
    todoToggled(state, action) {
      const todo = state.find(todo => todo.id === action.payload)
      todo.completed = !todo.completed
    }
  }
})

export const { todoAdded, todoToggled } = todosSlice.actions
export default todosSlice.reducer

More details on how and why to use Redux Toolkit:

• Why Redux Toolkit is How to Use Redux Today
• Redux Essentials, Part 2: Redux App Structure
• Redux Fundamentals, Part 8: Modern Redux with Redux Toolkit
• Presentation: Modern Redux with Redux Toolkit

[Sergey Khomushin]

Or you can just use TypeScript :)