Redux Resource
  • Home
  • Introduction
    • Motivation
    • Core Concepts
    • Similar Projects
    • Examples
  • Resources
    • Resource Reducers
    • Resource Objects
    • Meta
    • Lists
    • Modifying Resources
  • Requests
    • Request Objects
    • Keys
    • Names
    • Statuses
    • Request Actions
      • Updating Lists
      • Reading Resources
      • Updating Resources
      • Creating Resources
      • Deleting Resources
  • Other Guides
    • Usage With React
    • Tracking Request Statuses
    • Using Request Statuses
    • Custom Action Types
    • Migration Guides
  • Recipes
    • Forms
    • Canceling Requests
    • Unauthorized Responses
    • User Feedback
    • Related Resources
    • Caching
  • Ecosystem Extras
    • Redux Resource Action Creators
    • Redux Resource XHR
    • Redux Resource Prop Types
    • Redux Resource Plugins
      • HTTP Status Codes
      • Selection
      • Reset
      • Included Resources
  • FAQ
    • General
    • State Tree
    • Actions
    • Lists
  • API Reference
    • resourceReducer
    • getStatus
    • getResources
    • upsertResources
    • setResourceMeta
    • actionTypes
    • requestStatuses
Powered by GitBook
On this page
  • Other Guides
  • Installation
  • Usage
  • createActionCreators( crudAction, actionDefaults )
  • Arguments
  • Returns
  • Example
  1. Ecosystem Extras

Redux Resource Action Creators

PreviousEcosystem ExtrasNextRedux Resource XHR

Last updated 5 years ago

This library makes it more convenient to create valid . It helps out in two ways:

  1. Remembering the can be difficult

  2. Often times, your "start" and "end" actions share many properties, and it can feel like unnecessary

    boilerplate to copy + paste those properties

Unlike , these action creators do not make the requests for you. All this library does is create the actions themselves.

Other Guides

Old Documentation

Migration Guides

Installation

Install redux-resource-action-creators from npm:

npm install redux-resource-action-creators --save

Then, import createActionCreators in your application:

import createActionCreators from 'redux-resource-action-creators';

Usage

This library has a single export, createActionCreators.

createActionCreators( crudAction, actionDefaults )

Arguments

Returns

(Object): An object with four methods: pending, succeeded, failed, and idle. These action creators return actions for you, based on the action properties that you provide to them.

Example

import createActionCreators from 'redux-resource-action-creators';
import store from './store';

const readActionCreators = createActionCreators('read', {
  resourceType: 'books',
  requestKey: 'getHomePageBooks',
  list: 'homePageBooks',
  mergeListIds: false
});

store.dispatch(readActionCreators.pending());

const req = fetchData((err, res, body) => {
  if (req.aborted) {
    store.dispatch(readActionCreators.idle());
  } else if (err) {
    store.dispatch(readActionCreators.failed());
  } else {
    store.dispatch(readActionCreators.succeeded({
      resources: body
    }));
  }
});

To understand why you might use this library, compare that example versus this common Redux Resource code:

import { actionTypes } from 'redux-resource';
import store from './store';

store.dispatch({
  type: actionTypes.READ_RESOURCES_PENDING,
  resourceType: 'books',
  requestKey: 'getHomePageBooks',
  list: 'homePageBooks'
});

const req = fetchData((err, res, body) => {
  if (req.aborted) {
    store.dispatch({
      type: actionTypes.READ_RESOURCES_NULL,
      resourceType: 'books',
      requestKey: 'getHomePageBooks',
      list: 'homePageBooks'
    });
  } else if (err) {
    store.dispatch({
      type: actionTypes.READ_RESOURCES_FAILED,
      resourceType: 'books',
      requestKey: 'getHomePageBooks',
      list: 'homePageBooks'
    });
  } else {
    store.dispatch(readActionCreators.succeeded({
      type: actionTypes.READ_RESOURCES_SUCCEEDED,
      resourceType: 'books',
      requestKey: 'getHomePageBooks',
      list: 'homePageBooks',
      resources: body
    }));
  }
});

All that this library does is provides a simple pattern to write less, more expressive code. If you'd like, you could get many of the same benefits by defining shared action properties, and then spreading them in your actions:

import { actionTypes } from 'redux-resource';
import store from './store';

const actionDefaults = {
  resourceType: 'books',
  requestKey: 'getHomePageBooks',
  list: 'homePageBooks'
};

store.dispatch({
  ...actionDefaults,
  type: actionTypes.READ_RESOURCES_PENDING,
});

const req = fetchData((err, res, body) => {
  if (req.aborted) {
    store.dispatch({
      ...actionDefaults,
      type: actionTypes.READ_RESOURCES_NULL,
    });
  } else if (err) {
    store.dispatch({
      ...actionDefaults,
      type: actionTypes.READ_RESOURCES_FAILED,
    });
  } else {
    store.dispatch(readActionCreators.succeeded({
      ...actionDefaults,
      type: actionTypes.READ_RESOURCES_SUCCEEDED,
      resources: body
    }));
  }
});

crudAction: (String) The CRUD operation being performed. One of "create", "read", "update", or "delete". This determines the that are dispatched.

actionDefaults (Object): Properties that will be included on each dispatched action. The lists possible options, such as resourceType and resources. You must include resourceType.

CRUD Action types
Request Action guide
request actions
request action types
Redux Resource XHR
1.x documentation
v1 to v2
npm version
gzip size