Yarl Fetch

Store Restful Resources in Redux.

Why do I need this?

Use this to gracefully transition between remote request states:

start -> pending
pending -> success
pending -> failure

Redux subscribers can use this to keep track of such a request

Install

yarn add @yarljs/fetch

Usage

Assuming you've an appropriate endpoint:

// import  
const yarlReduce = require('@yarljs/reduce')
const yarlFetch = require('@yarljs/fetch');

// Make space for yarl in your store
const defaultState = {
  yarl: {

  }
}

// Create a store with our middleware
const store = redux.createStore(
  yarlReduce.reduce,
  defaultState,
  redux.applyMiddleware(yarlFetch.middleware)
);

// Build a Dispatchable redux action
const getChuckStuff = yarlFetch.fetching(
  "http://localhost:8081/chuck/jokes/categories",
  {method: "GET"},
  "getChuckStuff");

// ...
// invoke the method
store.dispatch(getChuckStuff({limit: 10, someParam: "baz"}))

Why No ES6?

You can and should use this in a transpilied project. Distributing common code which uses es6 features however puts constraint on the end user:

• You have to have the same language features in your project
• You are limited in what your minifier can perform
• You are limited in code splitting

API

fetching(uri, slice, [options])

Generate a new Redux Action and Reducer for a given uri

Arguments

• uri String REST endpoint
• slice String Resulting Action name and storage location
• options fetch options. Defaults to empty

Returns function slice(params, [transform])

Invokable Action.

Args

• params Either an Object of params, or a function which will be passed the current redux state, which may be mapped into the request. These fields will be placed in the queryParam or Body section of your request, depending on the HTTP method
• transform An optional function to mutate the the resulting data before it's placed in the redux store

middleware()

Redux Middleware function which handles disatching the async request.