redux-action-constants

Simple utils library for ReduxJS.

---

Instalation

To install redux-action-constants - you can use npm or yarn package manager.

npm install redux-action-constants

yarn add redux-action-constants

---

Documentation

The redux-action-constants library includes two functions: createActions and createActionConstant. Below you can find the documentation for both functions.

---

The createActions function

The function that creates actions from action-constants for dispatching.

The createActions function accept next arguments:

Name	Type
actions	object

---

The createActionConstant function

The function that creates a nested action-constant.

The createActionConstant function accept next arguments:

Name	Type
entrypoint	string
schema	object

---

Examples

1) The process of creating an action-constant.

import { createActionConstant } from "redux-action-constants";
 
export const ENTITIES = createActionConstant("ENTITIES", {
  FETCH: {
    POSTS: null,
    COMMENTS: null
  }
});
 
/**
 * The ENTITIES constant will have the next structure:
 *
 * {
 *   REQUEST: "ENTITIES.REQUEST",
 *   PROCESS: "ENTITIES.PROCESS",
 *   SUCCESS: "ENTITIES.SUCCESS",
 *   FAILURE: "ENTITIES.FAILURE",
 *   HANDLER: undefined
 *
 *   FETCH: {
 *     REQUEST: "ENTITIES.FETCH.REQUEST",
 *     PROCESS: "ENTITIES.FETCH.PROCESS",
 *     SUCCESS: "ENTITIES.FETCH.SUCCESS",
 *     FAILURE: "ENTITIES.FETCH.FAILURE",
 *     HANDLER: undefined
 *
 *     POSTS: {
 *       REQUEST: "ENTITIES.FETCH.POSTS.REQUEST",
 *       PROCESS: "ENTITIES.FETCH.POSTS.PROCESS",
 *       SUCCESS: "ENTITIES.FETCH.POSTS.SUCCESS",
 *       FAILURE: "ENTITIES.FETCH.POSTS.FAILURE",
 *       HANDLER: undefined
 *     },
 *
 *     COMMENTS: {
 *       REQUEST: "ENTITIES.FETCH.COMMENTS.REQUEST",
 *       PROCESS: "ENTITIES.FETCH.COMMENTS.PROCESS",
 *       SUCCESS: "ENTITIES.FETCH.COMMENTS.SUCCESS",
 *       FAILURE: "ENTITIES.FETCH.COMMENTS.FAILURE",
 *       HANDLER: undefined
 *     }
 *   }
 * }
 */

---

2) The process of creating actions for dispatching.

import React, { Component } from "react";
import { connect } from "react-redux";
import { createActions } from "redux-action-constants";
import { ENTITIES } from "../../constants";
 
class MyClass extends Component {
  render() {
    return null;
  }
}
 
/**
 * Action handlers will be automatically created and targeted to the REQUEST handler.
 *
 * Warning!
 * Don't try to add the .REQUEST or the .SUCCESS or etc. in end of constant by yourself.
 * It's won't work.
 */
const mapDispatchToProps = createActions({
  fetchPosts: ENTITIES.FETCH.POSTS,
  fetchComments: ENTITIES.FETCH.COMMENTS
});
 
export default connect(
  null,
  mapDispatchToProps
)(MyClass);

---

3) Subscribe your reducer to the action-constant.

import { ENTITIES } from "../../constants";
 
const initialState = {
  isLoading: false,
  error: "",
  data: []
};
 
export function myPostsReducer(state = initialState, action) {
  const { type, content } = action;
  const { data, error } = content;
 
  switch (type) {
    case ENTITIES.FETCH.POSTS.PROCESS:
      return {
        isLoading: true,
        error: "",
        data: []
      };
 
    case ENTITIES.FETCH.POSTS.SUCCESS:
      return {
        isLoading: false,
        error: "",
        data: data
      };
 
    case ENTITIES.FETCH.POSTS.FAILURE:
      return {
        isLoading: false,
        error: error,
        data: []
      };
  }
}