https://github.com/stutrek/redux-action-wrapper

Simplifies your mapDispatchToProps significantly
https://github.com/stutrek/redux-action-wrapper

Last synced: about 1 month ago
JSON representation

Simplifies your mapDispatchToProps significantly

• Host: GitHub
• URL: https://github.com/stutrek/redux-action-wrapper
• Owner: stutrek
• Created: 2016-12-14T16:39:34.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2016-12-15T20:24:05.000Z (almost 8 years ago)
• Last Synced: 2024-09-21T21:50:19.187Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 4.88 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Redux Action Wrapper

This is a recursive version of `bindActionCreators`. It simplifies your `mapDispatchToProps` and removes a significant amount of boilerplate by wrapping your action modules with the dispatch function. It takes an object that contains functions and returns those functions wrapped in the dispatch method. The object is traversed recursively. Non-functions are ignored.

## Basic Usage

The action wrapper is only used in the mapDispatchToProps function that you pass to redux's `connect`.

```javascript

import actionWrapper from 'redux-action-wrapper';

function mapDispatchToProps (dispatch) {

	return actionWrapper({

		userActions,

		modalActions,

		randomAction: () => ({type: 'MY_ACTION'})

	}, dispatch);

}

```

## API

Only one function is provided.

```javascript

var actions = actionWrapper({an object of actions}, dispatch)

```

### Arguments

* `actionsObject` is an object, possibly nested, containing action functions.

* `dispatch` is the dispatch method provided by react-redux.

### Return Value

The actions object returned can be returned from `mapDispatchToProps` directly.

## Using it in your components

All functions on the object passed to `actionWrapper` are wrapped in the `dispatch` function provided by Redux. You access them through `this.props`.

```javascript

// for the root level

this.props.actionName();

// for nested objects

this.props.userActions.load();

// and deeply nested is the same

this.props.userActions.preferences.setCity('NYC');

```

## Usage with some context

```javascript

import React from 'react';

import { connect } from 'react-redux';

import * as userActions from 'path/to/userActions';

import * as modalActions from 'path/to/modalActions';

import actionWrapper from 'redux-action-wrapper';

class MyComponent extends React.Component {

	componentDidMount () {

		if (!this.props.user) {

			this.props.userActions.load(); // <---- ACTION USAGE

		}

		this.props.randomAction(); // <------------ ACTION USAGE

	}

	

	render () {

		if (this.props.user) {

			return ({this.props.user.name});

		} else {

			return (Loading...);

		}

	}

}

function mapDispatchToProps (dispatch) {

	return actionWrapper({ // <---------- ACTION WRAPPER IS HERE

		userActions,

		modalActions,

		randomAction: () => ({type: 'MY_ACTION'})

	}, dispatch);

}

function mapStoreToProps (store) {

	return store;

}

export default connect(mapStoreToProps, mapDispatchToProps)(MyComponent);

```