Examples

With this strategy, each application can be developed like any other normal redux application. State is managed as if this component is the root. Side effects are handled at the root level as well.

Here are a few mini apps we created to illustrate the example:

PokemonMe!

PokemonMe uses the public Pokemon API to deliver nostalgia on every button press. The app is comprised of of a single Component that holds the view, and a module which takes care of fetching and caching responses from the Pokemon API.

PokemonMe Demo

Link to repository

Stopwatch

A self managed stopwatch component which increments its time until the reset button is clicked.
Stopwatch Demo

Link to repository

SplitPane

SplitPane is an attempt to replicate pane splitting, similar to tmux and iTerm. The app comprises of a single Component that holds the view, and a module which takes care of state transformations and side effects.

This is a great example of the power of redux-modules and loops in that each parent box delegates state transformations to its children to the child reducer.
SplitPane D

Link to Repository

Putting it together

Infinite Split Pane
This infinite split pane example tests the limits of the pattern.

Each of the apps rendered share a slice of the full parent state. By keeping the state nested and denormalized, there's no added complexity when it comes to managing child components.

Additionally, because each parent component manages its children, we have control over child state at every level. This gives us the ability to respond to global actions, as well as local ones.

Link to repository

results matching ""

    No results matching ""