Create Container
Predictable state containers for React apps
Philosophy
Redux is awesome, but sometimes it might not be the best fit. MobX is awesome, but sometimes it might not be the best fit.
Wouldn't it be great if you could choose a different state management architecture for the different features you are building?
For example, for a simple theme/language store Redux would be overkill, but it shines for stores that receives data through a set of websocket events.
That's the reason we've built this library, you can create multiple stores (containers) having the option to choose the best architecture for the job.
Installation
npm install --save @smalldots/create-container
Import Cost
Demos
- Simple counter: https://codesandbox.io/s/03znoqjz4w
- Static and dynamic forms: https://codesandbox.io/s/n79lpw1l1p
- Decoupling state, behavior and presentation: https://codesandbox.io/s/6lwyx2p69k
- Container composition: https://codesandbox.io/s/pp8494k03q
- Starting mutations when mounting: https://codesandbox.io/s/n0nv2vo21l
- Entity container: https://codesandbox.io/s/mzyljzlxj8
- Using high order containers to create multiple counters: https://codesandbox.io/s/yqrxnk48x1
- Advanced example (data fetching + entities handling): https://codesandbox.io/s/1vn8j7yq83
Infinity Architecture (optional)
You have the choice to use the simplest container version, createContainer, the Redux inspired version, createReduxContainer or createInfinityContainer, which implements the Infinity Architecture:
How to start mutations when mounting?
It's easy. You can play with this example: https://codesandbox.io/s/n0nv2vo21l
import React from "react"
import { render } from "react-dom"
import { createContainer, Component } from "@smalldots/create-container"
const CounterContainer = createContainer({
initialState: { count: 0 },
mutations: {
increment: () => state => ({ count: state.count + 1 }),
decrement: () => state => ({ count: state.count - 1 })
},
effects: {
incrementForever: () => ({ increment }) => setInterval(increment, 1000),
maybeDecrement: () => ({ decrement }) => Math.random() <= 0.2 && decrement()
}
})
const App = () => (
<CounterContainer.Provider>
<CounterContainer.Consumer>
{({ count, incrementForever, maybeDecrement }) => (
<Component onMount={incrementForever} onUpdate={maybeDecrement}>
<p>
Current count: {count}
<br />
<small>
(It has a 20% chance of pausing for a while, you are not crazy :D)
</small>
</p>
</Component>
)}
</CounterContainer.Consumer>
</CounterContainer.Provider>
)
render(<App />, document.getElementById("root"))How to compose multiple containers?
It's easy. You can play with this example: https://codesandbox.io/s/pp8494k03q
import React, { Fragment } from "react"
import { render } from "react-dom"
import { createContainer, Compose } from "@smalldots/create-container"
const CounterContainer = createContainer({
initialState: { count: 0 },
mutations: {
increment: () => state => ({ count: state.count + 1 }),
decrement: () => state => ({ count: state.count - 1 })
}
})
const TodoContainer = createContainer({
initialState: { todos: [] },
mutations: {
addTodo: () => state => ({
todos: [
{ id: `${new Date().getTime()}.${Math.ceil(Math.random() * 1000)}` },
...state.todos
]
})
}
})
const App = () => (
<Compose
components={[<CounterContainer.Provider />, <TodoContainer.Provider />]}
>
<Compose
components={[<CounterContainer.Consumer />, <TodoContainer.Consumer />]}
>
{({ count, increment, decrement }, { todos, addTodo }) => (
<Fragment>
<p>Current count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
<hr />
<button onClick={addTodo}>Add Todo</button>
<pre>{JSON.stringify(todos, null, 2)}</pre>
</Fragment>
)}
</Compose>
</Compose>
)
render(<App />, document.getElementById("root"))Usage
import React, { Fragment } from "react"
import { render } from "react-dom"
import {
createContainer,
createReduxContainer,
createInfinityContainer,
Compose
} from "@smalldots/create-container"
const CounterContainer = createContainer({
initialState: { count: 0 },
selectors: {
getNextCount: state => state.count + 1
},
mutations: {
increment: () => state => ({ count: state.count + 1 }),
decrement: () => state => ({ count: state.count - 1 })
},
effects: {
gamify: () => ({ increment, decrement, setState }) =>
setTimeout(() => {
Math.random() > 0.5 ? increment() : decrement()
setState(state => ({ count: state.count + Math.random() }))
}, 500)
}
})
const ReduxCounterContainer = createReduxContainer({
initialState: { count: 0 },
reducer: {
INCREMENT: state => ({ count: state.count + 1 }),
DECREMENT: state => ({ count: state.count - 1 }),
RANDOMIZE: state => ({ count: state.count + Math.random() })
},
selectors: {
getNextCount: state => state.count + 1
},
actions: {
increment: "INCREMENT",
decrement: "DECREMENT",
randomize: "RANDOMIZE"
},
effects: {
gamify: () => ({ increment, decrement, randomize }) =>
setTimeout(() => {
Math.random() > 0.5 ? increment() : decrement()
randomize()
}, 500)
}
})
const InfinityCounterContainer = createInfinityContainer({
initialState: { count: 0 },
reducer: {
INCREMENT: state => ({ count: state.count + 1 }),
DECREMENT: state => ({ count: state.count - 1 }),
RANDOMIZE: state => ({ count: state.count + Math.random() })
},
selectors: {
getCount: state => state.count,
getNextCount: state => state.count + 1
},
events: {
incrementClicked: "INCREMENT_CLICKED",
decrementClicked: "DECREMENT_CLICKED",
gamifyClicked: "GAMIFY_CLICKED"
},
listeners: {
INCREMENT_CLICKED: ({ increment }) => increment(),
DECREMENT_CLICKED: ({ decrement }) => decrement(),
GAMIFY_CLICKED: ({ gamify }) => gamify()
},
commands: {
increment: "INCREMENT",
decrement: "DECREMENT",
randomize: "RANDOMIZE"
},
effects: {
gamify: () => ({ increment, decrement, randomize }) =>
setTimeout(() => {
Math.random() > 0.5 ? increment() : decrement()
randomize()
}, 500)
}
})
const Counter = ({ count, nextCount, onIncrement, onDecrement, onGamify }) => (
<Fragment>
<p>Current count: {count}</p>
<p>If you click "Increment" the next count will be: {nextCount}</p>
<button onClick={onIncrement}>Increment</button>
<button onClick={onDecrement}>Decrement</button>
<button onClick={onGamify}>Gamify</button>
</Fragment>
)
const CounterContainerDemo = () => (
<CounterContainer.Consumer>
{({ count, getNextCount, increment, decrement, gamify }) => (
<Counter
count={count}
nextCount={getNextCount()}
onIncrement={increment}
onDecrement={decrement}
onGamify={gamify}
/>
)}
</CounterContainer.Consumer>
)
const ReduxCounterContainerDemo = () => (
<ReduxCounterContainer.Consumer>
{({ count, getNextCount, increment, decrement, gamify }) => (
<Counter
count={count}
nextCount={getNextCount()}
onIncrement={increment}
onDecrement={decrement}
onGamify={gamify}
/>
)}
</ReduxCounterContainer.Consumer>
)
const InfinityCounterContainerDemo = () => (
<InfinityCounterContainer.Consumer>
{({
getCount,
getNextCount,
incrementClicked,
decrementClicked,
gamifyClicked
}) => (
<Counter
count={getCount()}
nextCount={getNextCount()}
onIncrement={incrementClicked}
onDecrement={decrementClicked}
onGamify={gamifyClicked}
/>
)}
</InfinityCounterContainer.Consumer>
)
const App = () => (
<Compose
components={[
<CounterContainer.Provider />,
<ReduxCounterContainer.Provider />,
<InfinityCounterContainer.Provider />
]}
>
<h1>Container Demo</h1>
<CounterContainerDemo />
<h1>Redux Container Demo</h1>
<ReduxCounterContainerDemo />
<h1>Infinity Container Demo</h1>
<InfinityCounterContainerDemo />
</Compose>
)
render(<App />, document.getElementById("root"))