• Stars
    star
    496
  • Rank 88,807 (Top 2 %)
  • Language
    TypeScript
  • Created almost 9 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React / Redux action composition made simple http://salsita.github.io/prism/

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

More Repositories

1

node-pg-migrate

Node.js database migration management for PostgreSQL
TypeScript
1,286
star
2

chrome-extension-skeleton

Minimal skeleton for Chrome extension
JavaScript
470
star
3

redux-side-effects

Redux toolset for keeping all the side effects inside your reducers while maintaining their purity.
JavaScript
182
star
4

redux-saga-rxjs

RxJS implementation of Saga pattern for redux
JavaScript
113
star
5

jq-clipthru

CoffeeScript
88
star
6

chrome-extension-skeleton-ng

JavaScript
68
star
7

flux-boilerplate

Very simple flux boilerplate with stateless stores and effect reducers
JavaScript
58
star
8

geo-tree

High performance library for geographical map-related operations
JavaScript
52
star
9

inStyle

Modify the current selector &: https://instyle-css.salsitasoft.com
CSS
47
star
10

flask-raml

Flask-RAML (REST API Markup Language) API server with parameter conversion, response encoding, and examples.
Python
47
star
11

passthruapp

Updated version of Igor Tandetnik's PassthroughAPP
C
26
star
12

redux-elm-skeleton

Skeleton project for quick start with redux-elm
JavaScript
18
star
13

web-api-proxy

Proxy any request to a remote web API to avoid embedding secret keys in your client-side app
JavaScript
15
star
14

go-jira

JIRA REST API client library for Go (Golang)
Go
15
star
15

jquery-ui-scalebreaker

does cool stuff
JavaScript
14
star
16

generator-salsa

JavaScript
12
star
17

go-pivotaltracker

Pivotal Tracker API client for Go (Golang)
Go
11
star
18

backbone-schema

JavaScript
11
star
19

shishito

Python module for selenium webdriver test execution
Python
10
star
20

redux-form-actions

JavaScript
10
star
21

dripping-bucket

Library to calculate delays for operations running against rate-limited services
JavaScript
10
star
22

ng2-if-media

TypeScript
9
star
23

grunt-package-minifier

Minimizes space taken by node modules and their dependencies.
JavaScript
9
star
24

Magpie

CommonJS partial implementation for Windows Active Script (JScript)
C++
8
star
25

scalable-frontend-with-cyclejs

Scalable frontend with Cycle.js
JavaScript
7
star
26

flask-config

Flask configuration class.
Python
7
star
27

spicy-hooks

TypeScript
7
star
28

postcss-inrule

https://instyle-css.salsitasoft.com/
JavaScript
7
star
29

react-beacon

Onboarding tooltips for web apps using Slack-like beacons
JavaScript
7
star
30

grunt-userev

JavaScript
6
star
31

RestQ

Declarative way to get data from RESTful APIs.
CoffeeScript
6
star
32

browser-require

Implementation of CommonJS require() function for use in client-side environments where synchronous loading is appropriate (e.g. browser extension).
JavaScript
6
star
33

react-training

react training app
TypeScript
5
star
34

jenkins-docker-skeleton

Test your app in Jenkins using Docker
Shell
5
star
35

mastermind

Mastermind (board game) with all the cool stuff packed in, namely redux-saga, normalizr, reselect and react-router.
JavaScript
5
star
36

todo2issue

CLI tool to synchronize in-code TODOs to GitHub issues
TypeScript
4
star
37

bunny-migrate

CLI tool for managing RabbitMQ schema instances
JavaScript
4
star
38

xml2js-schema

Extends node-xml2js with schema validation support based on JSON schema
JavaScript
4
star
39

react-devstack

An ultimate development stack built on top of React, Redux, Router5, Redux-Saga, React-Helmet
JavaScript
4
star
40

pyraml

RAML (REST API Markup Language) enhanced loader, parameter converter, and API wrapper.
Python
4
star
41

backbone-xml

JavaScript
4
star
42

go-sprintly

Sprintly API client for Go (Golang)
Go
3
star
43

winunit

Ready to use WinUnit for C++ unit testing
C++
3
star
44

foosball-rating

Keeps track of foosball player's rating based on augmented chess elo rating
JavaScript
3
star
45

flask-ecstatic

Serves static files with optional directory index.
Python
3
star
46

Serrano

Simple web data extraction language.
JavaScript
3
star
47

nodejs-training

backed part for our frontend (react/angular) trainings
JavaScript
3
star
48

mastermind-server

JavaScript
3
star
49

redux-ducks

Redux toolset for isolating state as defined by ducks-modular-redux proposal.
JavaScript
3
star
50

nodejs-modules

reusable modules for node.js backed servers / services
JavaScript
2
star
51

versionserver

A servlet providing auto-incremented build numbers for projects being built on Jenkins or other environments.
Python
2
star
52

angular-training

angular training app
TypeScript
2
star
53

iesetuphelper

Shared library containing helper functions for Windows setup packages.
C++
2
star
54

siros-postgres

New generation of HW / budget tracking system.
JavaScript
2
star
55

redux-prism

new name for redux-elm
2
star
56

grunt-md-templator

Take a Grunt template, add a hint of Markdown, shake and serve as HTML.
CoffeeScript
2
star
57

node_installer

Shell
2
star
58

crx-utils

Utilities for working with Chrome extension (.crx) files.
JavaScript
2
star
59

flask-run

Flask-based web application runner.
Python
2
star
60

salsita-dancing-santa

Celebrate the holiday season with Santa dancing to the dulcet tones of Wham!
CSS
2
star
61

pwa-cordova-meetup-app

Demo application for Salsita Meet Up May 14, 2019
Java
2
star
62

pydataloader

Extensible JSON/YAML/RAML/... data loader for Python.
Python
2
star
63

express-angular-skeleton

Skeleton for our new Express & Angular projects.
CSS
1
star
64

ng-modules

reusable modules for angular apps
TypeScript
1
star
65

wrapperElement

CSS
1
star
66

angular2-migration

JavaScript
1
star
67

jquery-viewable

lightweight jQuery extension that determines if a specific element is visible on a page
JavaScript
1
star
68

runtime-config

JavaScript
1
star
69

cci-pingu

Periodically check for new builds (artifacts) on CircleCI and install them in turn.
JavaScript
1
star
70

react-modules

reusable modules for react / redux apps
1
star
71

flask-serverinfo

Flask server info view for inspecting server app and user requests.
Python
1
star
72

angularjs-cayenne

JavaScript
1
star
73

metros-powerup

Card pointing power up for Trello
JavaScript
1
star
74

salsita.github.io

HTML
1
star
75

left-pad-service

Demo application for Salsita presentation on 2016/11/24
JavaScript
1
star
76

cordova-node-api

JavaScript
1
star
77

shishito-sample-project

Sample project for Salsa WebQA library
Python
1
star
78

bloggo

Poet & Angular based blagging app.
JavaScript
1
star