https://github.com/tshelburne/redux-batched-actions

redux higher order reducer + action to reduce actions under a single subscriber notification
https://github.com/tshelburne/redux-batched-actions

Last synced: about 18 hours ago
JSON representation

redux higher order reducer + action to reduce actions under a single subscriber notification

• Host: GitHub
• URL: https://github.com/tshelburne/redux-batched-actions
• Owner: tshelburne
• License: mit
• Created: 2015-10-19T21:01:34.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2024-03-27T12:02:26.000Z (9 months ago)
• Last Synced: 2024-10-29T15:38:13.448Z (about 1 month ago)
• Language: JavaScript
• Size: 36.1 KB
• Stars: 1,045
• Watchers: 7
• Forks: 37
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

• awesome-react-components-all - redux-batched-actions - Redux higher order reducer + action to reduce actions under a single subscriber notification. (Uncategorized / Uncategorized)
• awesome-react-components - redux-batched-actions - Reducer + action to reduce actions under a single subscriber notification. (Code Design / Data Store)
• awesome-list - redux-batched-actions - Redux higher order reducer + action to reduce actions under a single subscriber notification. (Code Design / Data Store)
• awesome-react-components - redux-batched-actions - Reducer + action to reduce actions under a single subscriber notification. (Code Design / Data Store)
• awesome-react-components - redux-batched-actions - Reducer + action to reduce actions under a single subscriber notification. (Code Design / Data Store)
• awesome-react-components - redux-batched-actions - Reducer + action to reduce actions under a single subscriber notification. (Code Design / Data Store)
• fucking-awesome-react-components - redux-batched-actions - Reducer + action to reduce actions under a single subscriber notification. (Code Design / Data Store)

README

        
redux-batched-actions

=====================

[![Build Status](https://travis-ci.org/tshelburne/redux-batched-actions.svg)](https://travis-ci.org/tshelburne/redux-batched-actions)

Batching action creator and associated higher order reducer for [redux](https://github.com/gaearon/redux) that enables batching subscriber notifications for an array of actions.

```js

npm install --save redux-batched-actions

```

## Usage

```js

import {createStore, applyMiddleware} from 'redux';

import {batchActions, enableBatching, batchDispatchMiddleware} from 'redux-batched-actions';

import {createAction} from 'redux-actions';

const doThing = createAction('DO_THING')

const doOther = createAction('DO_OTHER')

function reducer(state, action) {

	switch (action.type) {

		case 'DO_THING': return 'thing'

		case 'DO_OTHER': return 'other'

		default: return state

	}

}

// Handle bundled actions in reducer

const store = createStore(enableBatching(reducer), initialState)

store.dispatch(batchActions([doThing(), doOther()]))

// OR

store.dispatch(batchActions([doThing(), doOther()], 'DO_BOTH'))

```

## Recipes

### Async

Usage for action creators that return objects is trivial, but it also works well with [thunks](https://github.com/gaearon/redux-thunk) to perform large reductions on multiple asynchronous actions, or actions that rely on external services. For example:

```js

const setLoading = createAction('SET_LOADING')

const setUser = createAction('SET_USER')

const unsetLoading = createAction('UNSET_LOADING')

function login(credentials) {

	return function(dispatch) {

		dispatch(setLoading());

		authenticate(credentials)

			.then(user => {

				dispatch(batchActions([

					setUser(user),

					unsetLoading()

				], 'LOGIN_SUCCESS'))

			})

		})

	}

}

```

In this example, the subscribers would be notified twice: once when the state is loading, and then again once the user has been loaded.

### Middleware integration

You can add a middleware to dispatch each of the bundled actions. This can be used if other middlewares are listening for one of the bundled actions to be dispatched.

```js

const store = createStore(

		reducer,

		initialState,

		applyMiddleware(batchDispatchMiddleware)

)

```

Note that batchDispatchMiddleware and enableBatching should not be used together as batchDispatchMiddleware calls next on the action it receives, whilst also dispatching each of the bundled actions.

## Thanks

Thanks to [Dan Abramov](https://github.com/gaearon) for help in Redux best practices and original idea.