Redux-needs NPM

redux-needs ·

🎁 Wrapping everyday data to your containers in need 🎁

Bind actions to changes in your Redux state based on the needs of your active Redux components.

Usage

Simple binding

Dispatch the ping action when MyComponent is mounted.

import React from 'react';
import needs from 'redux-needs';

const ping = () => ({
  type: 'PING',
});

const MyComponent = () => (
  <h1>Hello, world!</h1>
);

export default needs([ ping ])(MyComponent);

Complex binding

Dispatch the ping action when MyComponent is mounted and again every time the value of the name property changes.

import React from 'react';
import needs from 'redux-needs';

const ping = () => ({
  type: 'PING',
});

const MyComponent = ({ name }) => (
  <h1>Hello, { name }!</h1>
);

MyComponent.defaultProps = {
  name: 'world',
};

export default needs({
    props: [ 'name' ],
    action: ping,
})(MyComponent);

API

const binder = needs(bindings);

Returns a new binder method which, when called with a component, will return the component wrapped with the configured bindings. This method is compatible with the Redux compose method.

bindings (required) - an array containing bindings

Bindings

Simple bindings

Simple bindings will trigger an action only once: when the component is mounted.

To add a simple binding just add an action creator to the array of bindings. When the component is mounted the action creator will be called with this.props and the resulting action will be dispatched.

Go to the example.

Complex bindings

Complex bindings will trigger an action when the component is mounted and again when one or more of the bound properties change.

To add a complex binding add an object to array of bindings with two properties:

action - the action creator
props - an array of strings describing the properties of the component to watch

The prop field can contain nested properties. For example; given the following object, the c property with a value of 3 can be bound to using a[0].b.c:

{
  "a": [
    { "b": { "c": 3 } },
    { "b": { "c": 4 } }
  ],
  "d": 5
};

When binding to specific values, the action creator will be called with a subset of this.props matching the bound property paths. In the case of the previous example, this would mean the action creator would be called with the follwing object:

{
  "a": [
    { "b": { "c": 3 }
  ]
}

Note: the action creators will sometimes be called even if the action will not be dispatched. As this could potentially be every time componentWillUpdate is called on your component, your action creators should be lightweigth methods.

Go to the example.