This is a Redux middleware that allows you to easy combine async actions and dispatch them either sequentially or in parallel.

Overview

Redux Combine Actions

build status npm version

This is a Redux middleware that allows you to easy combine async actions and dispatch them either sequentially or in parallel.

Installation

npm install --save redux-combine-actions

Usage

To enable redux-combine-actions use applyMiddleware()

import { createStore, combineReducers, applyMiddleware } from 'redux';
import combineActionsMiddleware from 'redux-combine-actions';
import * as reducers from './reducers';

let createStoreWithMiddleware = applyMiddleware(combineActionsMiddleware)(createStore);

let reducer = combineReducers(reducers);
let store = createStoreWithMiddleware(reducer);

To use the middleware, you action creator must return action with the following fields:

  • types - An array of action types in the next notation: [PENDING, SUCCESS, ERROR], where PENDING action is dispatched immediately, SUCCESS action is dispatched only if all child actions were executed successfully and ERROR action is dispatched only if an error occurred.
  • payload - An array of action creators. This field must contain set of functions which shall be dispatched. For example, it can be ordinary action creators, or action creators that return a promise (see redux-promise or redux-promise-middleware), in this case, you can specify sequence option.
  • sequence - Specifies actions sequence. If true - dispatch array of action creators in sequential order, else - dispatch in parallel.

The middleware returns a promise to the caller and a FSA compliant action for both SUCCESS and ERROR action types.

Simple usage

export function addTodo(text) {
  return { type: ADD_TODO, text };
}

export function increment() {
  return { type: INCREMENT_COUNTER };
}

// Combine "addTodo" and "increment" actions
export function addTodoAndIncrement({text}) {

    return {
        types: [
            'COMBINED_ACTION_START',
            'COMBINED_ACTION_SUCCESS',
            'COMBINED_ACTION_ERROR'
        ],

        // Pass actions in array
        payload: [addTodo.bind(null, text), increment]
    };
}

// Dispatch action
store.dispatch(addTodoAndIncrement({text:'Dispatch combined action'}));

This will dispatch actions in the following sequence:

COMBINED_ACTION_START > ADD_TODO > INCREMENT_COUNTER > COMBINED_ACTION_SUCCESS

With promises

Using in combination with redux-promise-middleware.

export function getProviders() {
    return {
        types: [
            'PROVIDERS_GET_PENDING',
            'PROVIDERS_GET_SUCCESS',
            'PROVIDERS_GET_ERROR'
        ],
        payload: {
            promise: api.getProvidersAsync()
        }
    };
}

export function getSubscribers() {
    return {
        types: [
            'SUBSCRIBER_GET_PENDING',
            'SUBSCRIBER_GET_SUCCESS',
            'SUBSCRIBER_GET_ERROR'
        ],
        payload: {
            promise: api.getSubscribersAsync()
        }
    };
}

// Combine "getProviders" and "getSubscribers" actions
export function fetchData() {

    return {
        types: [
            'DATABASE_FETCH_PENDING',
            'DATABASE_FETCH_SUCCESS',
            'DATABASE_FETCH_ERROR'
        ],

        // Set true for sequential actions
        sequence: true,

        // Pass actions in array
        payload: [getProviders, getSubscribers]
    };
}

This will dispatch actions one after another:

DATABASE_FETCH_PENDING > PROVIDERS_GET_PENDING > PROVIDERS_GET_SUCCESS > SUBSCRIBER_GET_PENDING > SUBSCRIBER_GET_SUCCESS > DATABASE_FETCH_SUCCESS

If you set sequence to false then all child actions will be dispatched in parallel:

DATABASE_FETCH_PENDING > PROVIDERS_GET_PENDING > SUBSCRIBER_GET_PENDING > PROVIDERS_GET_SUCCESS > SUBSCRIBER_GET_SUCCESS > DATABASE_FETCH_SUCCESS

License

MIT

You might also like...
A Higher Order Component using react-redux to keep form state in a Redux store
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

redux-immutable redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state. When Redux creat

A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor
A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor

Redux DevTools Chart Monitor This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and

This is a simple react project that Stores the books, When the user enter any book with the category will be updated in the API and you can get someof books from API based on the category. 📚

Book Store React 📚 This is a simple react project that Stores the books, When the user enter any book with the category will be updated in the API an

DevTools for Redux with hot reloading, action replay, and customizable UI
DevTools for Redux with hot reloading, action replay, and customizable UI

Redux DevTools Developer Tools to power-up Redux development workflow or any other architecture which handles the state change (see integrations). It

Ruthlessly simple bindings to keep react-router and redux in sync

Project Deprecated This project is no longer maintained. For your Redux - Router syncing needs with React Router 4+, please see one of these librari

An i18n solution for React/Redux and React Native projects
An i18n solution for React/Redux and React Native projects

redux-react-i18n An i18n solution with plural forms support for Redux/React Workers of all countries, unite! Supported languages list with expected co

persist and rehydrate a redux store

Redux Persist Persist and rehydrate a redux store. v6 upgrade Web: no breaking changes React Native: Users must now explicitly pass their storage engi

A resizable and movable dock for Redux DevTools monitors
A resizable and movable dock for Redux DevTools monitors

Redux DevTools Dock Monitor A resizable and movable dock for Redux DevTools. Powered by React Dock. Installation npm install --save-dev redux-devtools

Comments
  • Updated intro sentence

    Updated intro sentence

    Found this lib through Awesome Redux, but initially I wasn't sure exactly what it does. After looking into it some more I got it, but I think adding 'async' makes it much clearer and mentioning the parallel option in the first sentence helps.

    Perhaps consider a name change too? The actions are not being "combined" and "combine" doesn't make me think of the serial/parallel aspect that is this lib's main point.

    Perhaps redux-sequence-actions? redux-order-actions?

    opened by mindjuice 2
  • Use type instead of types

    Use type instead of types

    rackt/redux dies if an action does not have a type property (see)

    I suggest using the same model for solving this as pburtchaell/redux-promise-middleware, namely the use of type suffixes (see)

    bug enhancement 
    opened by Jador 3
  • Rename package

    Rename package

    Following #4.

    As suggested by @mindjuice, the redux-sequence-actions name is more appropriate for this middleware. And I think it makes sense.

    If I rename this module, how to inform people (who use this middleware) about it?

    Or leave it as it is?

    What do you think @nickdima @Jador @callahanchris ?

    opened by itsmepetrov 2
Releases(v0.1.1)
Owner
Anton Petrov
Full-stack JavaScript developer. Focused on modern React, React Native, Redux, GraphQL, MongoDB, Universal (Isomorphic) applications.
Anton Petrov
Thunk middleware for Redux

Redux Thunk Thunk middleware for Redux. npm install redux-thunk yarn add redux-thunk Note on 2.x Update Most tutorials today assume that you're using

Redux 17.5k Dec 31, 2022
RxJS middleware for action side effects in Redux using "Epics"

RxJS-based middleware for Redux. Compose and cancel async actions to create side effects and more. https://redux-observable.js.org Install This has pe

redux-observable 7.8k Jan 6, 2023
Analytics middleware for Redux

redux-analytics Analytics middleware for Redux. $ npm install --save redux-analytics Want to customise your metadata further? Check out redux-tap. Usa

Mark Dalgleish 490 Aug 5, 2022
Redux Tutorial - share my experience regarding redux, react-redux and redux-toolkit

Redux Tutorial 1. Introduction to Redux 1.1 What is Redux & why Redux? A small JS Library for managing medium/large amount of states globally in your

Anisul Islam 36 Dec 29, 2022
Skeleton React App configured with Redux store along with redux-thunk, redux persist and form validation using formik and yup

Getting Started with React-Redux App Some Configrations Needed You guys need to modify the baseUrl (path to your server) in the server.js file that is

Usama Sarfraz 11 Jul 10, 2022
This command line helps you create components, pages and even redux implementation for your react project

react-help-create This command line helps you create components, pages and even redux implementation for your react project. How to install it? To ins

Omar 27 Dec 10, 2022
In this course you learn how to use Redux as a state manager in your React applications

Redux is a state manager which you can use it in your React, Vue and even Vanilla applications. In this course we store Redux storage in localstorage to keep our data.

AmirHossein Mohammadi 5 Jul 25, 2022
A simple app for study react with redux, redux saga and typescript.

React com Redux, Redux-Saga e TypeScript. ?? Uma aplicação simple para entender o funcionamento do Redux e a melhor maneira de utiliza-lo junto com o

João Marcos Belanga 1 May 24, 2022
Redux - Create forms using Redux And React

Exercício de fixação Vamos criar formulários utilizando Redux! \o/ Antes de inic

Márcio Júnior 2 Jul 21, 2022
A lightweight state management library for react inspired by redux and react-redux

A lightweight state management library for react inspired by redux and react-redux

null 2 Sep 9, 2022