algebraic-type
Algebraic types for JavaScript. Inspired by adt and the Elm architecture, but works with plain object.
Why?
To reduce boilerplate in generating and checking Redux action objects. To reduce errors when creating Redux action types and reducers. To allow action’s shape to be specified.
Examples
Simple Example
type Action = Increment | Decrement
const Action =
Todo Example from Redux
-
The Flux/Redux approach is to define action types as string constants. Each action type name is spelled out twice. There is a possibility that the constant or the value is misspelled.
const ADD_TODO = 'ADD_TODO'const DELETE_TODO = 'DELETE_TODO'const EDIT_TODO = 'EDIT_TODO'const COMPLETE_TODO = 'COMPLETE_TODO'const COMPLETE_ALL = 'COMPLETE_ALL'const CLEAR_COMPLETED = 'CLEAR_COMPLETED' -
In Elm, you declare your action as an algebraic data type. This also lets you specify the shape of your action, as well as providing type safety.
type Action= AddTodo String| DeleteTodo Int| EditTodo Int String| CompleteTodo Int| CompleteAll| ClearCompleted -
With algebraic-type, you create an algebraic type like this. Each key is the action type’s name. Inside it, you describe the shape of the object.
const Action =You still have the benefit of seeing all the actions in your application in a single place.
-
Plain Redux Action Creators: Create an object literal directly.
{return type: typesADD_TODO text}There is a possibility that you misspelt the property name. Maybe it’s late at night and you’re hungry and thinking about some tofu soup. You typed in
types.ADD_TOFU
(or justADD_TOFU
in case of ES6 imports). You end up dispatching anundefined
action. You may also be dispatching a malformed object. -
With
algebraic-type
: You invoke the value constructor.{return Action}The value constructor validates what’s passed into it, and returns a plain, serializable object with the
type
property set to the constructor’s name.Action// => { type: 'AddTodo', text: 'Learn Redux' }You immediately get an error if you misspell it.
Action// => TypeError: Action.AddTofu is not a functionYou immediately get an error if it is not in the shape you specified.
Action// => Error: missing property: "text"algebraic-type
is not a replacement for action creators; they are simply utilities that helps you creating well-formed action types and action objects. The case for action creators still holds. -
Plain Redux: Use switch statements. If you misspeelt the imported name, your reducer simply won’t process the action.
{} -
With
algebraic-type
: Use the generated matcher function. If you misspelt the action name, you immediately get a TypeError.{if Action...else if Action...elsereturn state} -
TK
createReducer
example.
Moar Feature Ideas
These are just ideas; they are not implemented yet.
-
Add name prefix to generated
type
to prevent them from clashing. Maybe follow the ducks convention:const Action =Another example is to construct similar-looking actions:
{returnprefixRequest:Success: response: ObjectFailure: error: String} -
Allow type composition/nested actions. This allows actions to be more modular.
Here is an example from Elm’s architecture tutorial, a list of counters:
const Action = -
switch() function that takes an incoming object and switches between functions based on type.
-
types() function that returns an list of available keys.