Menu

Redux Fetch Resource

bindEndpointActionCreator

Summary

bindEndpointActionCreator creates a bound FetchResource action creator. The endpoint url differs slightly, in that you can specify parameters.

Reference

bindEndpointActionCreator(url: string, options: ?object)


Arguments


endpoint (string)

The REST endpoint of the resource. The url can be parameterized like '/things/:group(/:id)'. Check out the url-pattern module for specifics around syntax.

Show Example

actions.js

import {bindEndpointActionCreator} from 'redux-fetch-resource';

// using a relative path
export const FetchUsers = bindEndpointActionCreator('users');

// using an absolute path
export const FetchGroups = bindEndpointActionCreator('/groups');

// with parameters
export const FetchMessages = bindEndpointActionCreator('/messages/:thread_id');

// with optional parameters
export const FetchSettings = bindEndpointActionCreator('/settings(/:type)');


options (object)

Accepts the same options as FetchResource see here for an exhaustive list of options


Returns


~BoundFetchResource (function)

An asynchronous action creator for the bound endpoint


~BoundFetchResource(options: ?object) (function)


Arguments


options (object)

Any of the options to FetchResource may be used here and will override the ones specified in bindEndpointActionCreator. The only additional option is params


options.params (object)

A map of parameters to populate the endpoint if it is parameterized

Show Example

ActionReducer.js

import {combineReducers} from 'redux';
import {bindEndpointActionCreator} from 'redux-fetch-resource';

const FETCH_USERS_SUCCESS = 'FETCH_USERS_SUCCESS';

export const FetchUsers = bindEndpointActionCreator(
  '/users/:team',
  {
    successType: FETCH_USERS_SUCCESS
  }
);

MyComponent.jsx

import React from 'react';
import {connect} from 'react-redux';
import {FetchUsers} from './ActionReducer.js';

const mapStateToProps = state => ({
  users: state.users
});

const mapDispatchToProps = dispatch => ({
  fetchUsers: team => dispatch(
    FetchUsers({ params: { team } })
  )
});

@connect(mapStateToProps, mapDispatchToProps)
export default class MyComponent extends React.Component {
  /* Insert your magic here */
}