Redux Data Structures
Introduction
Redux Data Structures is a library of reducer makers.
Reducer makers help create common reducers like counters, maps, lists (queues, stacks), sets, etc. Most application states can be built by combining a handful of these standardized building blocks.
Redux Data Structures was developed for Redux, but does not depend on it. It can actually be used with any reactive state container, even a custom one; Redux Data Structures doesn't have any dependency.
Getting Started
Here's an example from the Redux README, rewritten with Redux Data Structures:
Configuring Data Structures
Here's a more advanced example--with the same reducer maker--of a counter from 10 to 0, decreasing as a function of the action payload, then reset, representing life points for example:
Combining Data Structures
Let's build a classic todo app with Redux Data Structures:
That's all for the store! We've relied heavily on the reducer makers' default options, which presume that:
actions adhere to the Flux Standard Action (actions are plain Javascript object with a
type
andpayload
properties),and Todos are identified by an
id
property, used as a key in thetodos
map (and thecompletetedTodos
set).
Now let's subscribe to the store and dispatch a few actions:
Notice that todos
is normalized, for the reasons explained in the Redux documentation.
Compared to the original Redux Todo example, we've separated the Todo items (id, text) from their completion state. If needed, they could be combined with a selector.
The REMOVE_TODO
action is reduced both by the todos
map and the completedTodos
set.
Data Structures
So far, the following data structures have been implemented (corresponding action types are indicated in parentheses):
Boolean (set to true, set to false, toggle)
Counter (increment, decrement)
List (queue or stack: enqueue, dequeue, push, pop)
Map (add, remove, change)
Set (add, remove, toggle)
Value (set)
All data structures can be reset to their initial state, and, if applicable (for lists, maps, and sets), emptied.
API
Each reducer maker is a higher-order function of a single options
object and returns a reducer:
For each reducer maker, we describe below how the options
object is destructured, its default property values, and how some specific properties are used.
Defaults can--and in a lot of cases should--be overridden.
Each category of actions, e.g., decrementActionTypes
, is an array of action types (i.e., strings), so that several action types can have the same result (cf. Configuring Data Structures, above, where both PUNCH
and KICK
decrement lifePoints
).
Boolean
additionalConditionToTrue
and additionalConditionToFalse
are functions of action
and are used as such:
The default () => true
is equivalent to no additional condition.
Counter
increment
, decrement
, max
, and min
are functions of action
. If max
is undefined
, it is not enforced. Same for min
.
List
A list can be used as a queue or stack. enqueueActionTypes
and pushActionTypes
add items to the list, using the itemGetter
. The default itemGetter
adds the Flux Standard Action payload
to the list.
Map
map
uses the normalized state shape recommended by Redux, as can be seen from the default initialState
. Warning: if you overwrite initialState
, use the same format!
The default keyGetter
assumes that the action payload has an id
property. The default itemModifier
overwrites the item's properties (but does not delete the ones that have disappeared in the new action payload).
Set
In Redux Data Structures, a set's state is a plain Javascript object with boolean properties, i.e. if and only if key
is in the set, key
is a property of state
whose value is true
. Example:
When a key is removed from the set, the corresponding property is deleted from the state object:
Value
value
is the simplest data structure (to the extent that calling it a data structure is arguable).
Performance
Redux Data Structures doesn't focus on performance, but on developer productivity. In most cases, performance won't be an issue. If it is, please write an issue or submit a pull request.
Contributing
The code is written in modern Javascript, transpiled with Babel, using Jest for tests. Pull requests are welcome.
License
Author
Adrien Trouillaud, Codology.net
Last updated