Composing State
We advocate for creating atomic state and to compose new state when you need to.
There are several composition operations that you can perform and that we will see below.
One key aspect of composing state is that it returns another ConanState, which you can compose again.
Inception!
We can derive one state into a new one using ConanState.map:
Js
productQty$.map((productQty)=>productQty.qty)
productPrice$.map((price)=>price.priceUsd)
We can filter 1 state into a new one using ConanState.filter:
productQty$.filter((productQty) => productQty.qty % 2 === 0)
productQty$.filter((productQty)=>productQty.qty % 2 !== 0)
We can merge 2 states into 1 using ConanState.merge:
Js
productQty$.merge(productPrice$, (productQty, productPrice)
=> productQty && productPrice ? productQty.qty * productPrice.priceUsd : 0)
Js
productQty$.tuple(productPrice$)
We can combine N states into a new one using ConanState.combine:
Js
Ts
ConanState.combine(`combine`, {
price: productPrice$,
qty: productQty$
})
ConanState.combine<CombinedObject>(
`combine`,
{
price: productPrice$,
qty: productQty$
}
)
You can navigate these examples in this sandbox:
https://codesandbox.io/s/0po76?file=/src/app.tsx
codesandbox.io
Composing Conan states
Our dependency injection lets you describe atomic and composed state such that from the point of view of their consumers, they would not know (and won't care) wether if it is atomic state or not.
Last modified 2yr ago