Redux Provider Middleware

A redux middleware which provides Angular-like providers.

API

providerMiddleware(providers: array)

The providerMiddleware provides providers that similar with providers of Angular.js. A providerMiddleware injects providers that returns new or cached objects to action. It also similar with Spring Beans.

provider

To use providerMiddleware, you should create provider. provider is pure JavaScript Object. It must has propeties name and $get.

• name: A name of the provider. You can call provided object by this name in actions.
• $get({dispatch, getState}): A method that provides something. This can return anything you want. Variables, new instance, utility functions, singleton object...etc. $get will received object contains dispatch and getState like redux-thunk. It would help you when you need something related with redux state.

providedThunk(providers: object)

If you applied redux-provider-middleware to your redux application, you can dispatch providedThunk as action. providedThunk is function which reciedved providers object as argument. You can get provided things by name that you defined into provider. providedThunk should returns redux action. It could be also redux-thunk or promise. If you want to use other middleware with providerMiddleware, should add them after providerMiddleware.

USAGE

httpProvider.js

const HTTP_CLIENT = new HttpClient();

export default {
  name: '$http',
  $get({ dispatch, getState }) {
    const { context: { req } } = getState();
    return req ? new HttpClient(req) : HTTP_CLIENT;
  }
};

createStore.js

import { createStore, applyMiddleware } from 'redux';
import providerMiddleware from 'redux-provider-middleware';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware'
import rootReducer from './reducers/index';
import httpProvider from './httpProvider';

const store = createStore(
  rootReducer,
  applyMiddleware(
    providerMiddleware([httpProvider]),
    // You can also use other middleware with providers
    thunk,
    promiseMiddleware()
  )
);

actions.js

function getEntities() {
    // This is the provided thunk.
    return async ({ $http }) => {
      const response = await $http.get('/entities');
      return {
        type: 'UPDATE_ENTITIES',
        payload: {
            entities: response.body.entities
        }
      }
    }
}

function getEntityForUser() {
    // Use with redux-thunk
    return ({ $http }) => async (dispatch, getState) => {
        const { user: { id } } = getState();
        const response = await $http.get(`/entities/user/${id}`);
        return dispatch({
          type: 'UPDATE_ENTITY',
          payload: {
              entity: response.body.entity
          }
        })
    }
}