Skip to content
This repository has been archived by the owner on Mar 5, 2021. It is now read-only.
/ redux-inject Public archive

Redux middleware generator that allows dependencies to be injected into action creators.

License

Notifications You must be signed in to change notification settings

bradharms/redux-inject

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Redux Inject (Archived)

NOTE: This project is archived. No further updates will be made.

Redux middleware generator that allows dependencies to be injected into action creators.

Installation

npm install redux-inject

Example Usage (ES6/ES7)

import { applyMiddleware, createStore } from 'redux';
import inject from 'redux-inject';

import dep1 from '.../dep1';
import dep2 from '.../dep2';

const createStoreWithMiddleware = applyMiddleware(
  inject({dep1, dep2}); // Note that inject() is a 'curried' function
)(createStore);

After being applied, all action creators will be able to return a "dependency wrapper" function which will be supplied dependencies by name. The wrapper's return value will be passed to the next middleware via next(). Therefore, the signature of an action creator for such a function would look like this:

const createFooAction = (payload) => ({dep1, dep2}) => {
  // ...use dep1...
  // ...use dep2...
  return { type: FOO, ...payload };
}

Rational

This middleware was created to resolve a problem I faced while trying to write isomorphic model access code. My action creators needed to be used on both the client and the server, but they needed to access model data in different ways depending on which end they were currently running on. I decided the best way to do this was to provide the model access code via dependency injection, and the best way I could think to do it was using a Redux middleware.

Use with Redux-Thunk

NOTE: Redux-Thunk now includes the withExtraArgument() function, a feature that was intendded to solve the same problem as this library. If you were intending to use redux-inject and redux-thunk together, you may want to consider trying that first.

Though not required, this module was intended to be used in conjunction with redux-thunk. When the two are used together, you must be careful to ensure that the action creators nest their functions in the correct order. This order will be the same order in which the middlewares are applied, as in this example:

/**
 * @file configureStore.js
 */
import inject from 'redux-inject';
import thunk from 'redux-thunk';

const createStoreWithMiddleware = applyMiddleware(
 inject({dep1, dep2}),
 thunk
)(createStore);
/**
 * @file actions.js
 */

// RIGHT:
const createFooAction = (payload) => (deps) => (dispatch) => {
 return dispatch
}

// WRONG: dispatch will receive the deps, and the deps will receive the
//        dispatch function.
const createFooAction = (payload) => (dispatch) => (deps) => { ... }

Final Notes

This is the first module I've ever contributed to the JavaScript/Node ecosystems. If I've made a mistake or if you see any room for improvement, please don't hesitate to let me know.

About

Redux middleware generator that allows dependencies to be injected into action creators.

Resources

License

Stars

Watchers

Forks

Packages

No packages published