React / Redux action composition made simple http://salsita.github.io/prism/
Clone or download
tomkis Publish
 - prism-react@1.0.2
 - prism-redux@1.0.2
 - prism@4.1.2
Latest commit cacf400 May 30, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs docs Feb 21, 2017
examples/counters adjusting interface Feb 20, 2017
packages Publish May 30, 2017
.gitignore getting rid of DS_Store Feb 17, 2017
.travis.yml travis & tests Feb 17, 2017
README.md Update README.md May 15, 2017
book.json docs Feb 21, 2017
lerna.json 1st iteration of typescript impl Feb 17, 2017
package.json docs Feb 21, 2017
yarn.lock POC of v4.0.0 Feb 14, 2017

README.md

prism

React / Redux action composition made simple

Given function f and function g we can simply compose them: f ∘ g = f(g()).

Function composition in JavaScript is just a matter of calling function and passing the result as input to other function. This thesis can be applied to React Components and Redux Reducers as well, because functional stateless Component is nothing but function of its props (state of the application) and Reducer is just another plain JavaScript function. Can we compose actions?

Yes we can! Let's just call it action wrapping. Because it's the same principle like you would be wrapping a box inside a box, the last box in the hierarchy contains some object and that's the Action. We can just wrap action type to keep things simple and because action type is just a string, it's as easy as function composition.

const wrapWithFoo = actionType => `Foo.${actionType}`;
const wrapWithBar = actionType => `Bar.${actionType}`;

const composedActionType = wrapWithFoo(wrapWithBar('Baz'));

// Composed action type would be 'Foo.Bar.Baz';

What is it good for?

Imagine you've just implemented your awesome Calendar widget, but then comes a new requirement and you need to have two of those widgets on page so that user can select a date range. With plain old Redux, you need to do two steps:

  1. Isolate state in calendarReducer for particular instance of the Calendar
  2. Tag all the outgoing actions in Calendar component by id of the Calendar

prism ensures that these points are a breeze. Both of the points in particular are nothing but function composition.

prism is useful when you need to instantiate or isolate a UI component, where the UI component is defined as pair of View (React component) and correpsonding State (Redux Reducer).

Installation & Usage

You can install prism via npm.

npm install prism --save

The only peer dependency is React. Install react as well if you haven't done that yet.

Examples

For now, there's just one example showing action composition in action:

  1. Counters Pair

Inspiration

This project was previously called redux-elm and you should still be able to see how those ideas evoled over time in git history. So significiant amount of inspiration has been drawn from The Elm Architecture