DEV Community

Cover image for Redux Actions - Without declaring CONSTANTS and action-creator functions for each action
Ruben Arushanyan
Ruben Arushanyan

Posted on

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

#redux #react #javascript #lib

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
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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!!!'
Enter fullscreen mode Exit fullscreen mode

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

Links

Top comments (3)

Collapse
 
guscarpim profile image
Gustavo Scarpim •

Nice!

Collapse
 
markerikson profile image
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
Enter fullscreen mode Exit fullscreen mode

More details on how and why to use Redux Toolkit:

Collapse
 
xr0master profile image
Sergey Khomushin •

Or you can just use TypeScript :)

Read next

ghostkeeper10 profile image

How to implement Infinite Scrolling in React Native

Rupesh Ghosh -

luqmanshaban profile image

Uploading Files with React (POST Request)

Luqman Shaban -

sariah profile image

Top 10 Most Useful Custom Hooks in React

Sariah -

devjosemanuel profile image

Test componentes que usan Redux

DevJoseManuel -