redux-action-constants v1.0.1

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:

The createActionConstant function

The function that creates a nested action-constant.

The createActionConstant function accept next arguments:

#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: []
      };
  }
}