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:
- Isolate state in
calendarReducer
for particular instance of the Calendar - 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:
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