Comments (3)
Hi @ntilwalli
I understand that currently the only way to remove an unused child component's property from the onion state is to have the parent set it's state value to undefined.
Alternatively, the child can also set its own state value to undefined. Either the parent or child have control over that.
But what's puzzling me is to think of a case where a child component disappears but its state property is still present. So far I've been treating undefined
setters as the only way of making a component disappear. So it should be an equivalence: "the child component is shown if and only if its corresponding state subtree is not undefined". What does your use case look like?
from cycle-onionify.
Here's one use case I believe (child state gets added to parent and doesn't get removed).
const toggle_visibility$ = DOM.select('.foo').events('click').fold((acc, val) => !val, false)
const child$ = toggle_visibilty$.map(show => {
if (show) { // Uses onionify
return isolate((sources) => {
return {
DOM: sources.onion.state$.map(state => div([state.val ? state.val : null])),
onion: xs.of(state => {
return {
val: 'Some value'
}
})
}
})(sources)
} else {
return { // return an empty component
DOM: xs.of(undefined),
onion: xs.never()
}
}).remember()
const child_dom$ = child$.map(child => child.DOM).flatten()
const child_onion$ = child$.map(child => child.onion).flatten()
from cycle-onionify.
Okay I understand the use case now.
I'm afraid doing what you asked is not possible, or at least would break other use cases. I can explain how.
First note that the onion sink is for writing state. When that sink is unsubscribed, it means that child component won't anymore write state. But that doesn't mean its state scope should be destroyed. What if the child uses a property on the parent state object which other children will also read? Yes, isolation still plays a role there in order to separate sibling scopes, but onionify supports lenses and this means the child's readable state can be a summary of the entire state object from the parent.
This is why we can't automatically emit an UndefinedReducer when child reducer stream is unsubscribed, because we have no guarantee that the readable state from the child is not also read by others.
Now that I saw your use case, I can recommend a refactor of it. Instead of toggle$ mapped to a component, I recommend clicks on .foo
to emit reducer which will toggle the child's substate.
Assuming
type ParentState = {
// ...
child?: ChildState,
}
The toggling reducer in the parent could be
toggleReducer$ = click$.mapTo(function toggleReducer(prevState) {
if (typeof prevState.child === 'undefined') {
return {...prevState, child: {}};
// I put {} here, but this can be anything, as long as the child's
// default/initial reducer will override that with its own definition
// of child initial state
} else {
return {...prevState, child: undefined}
}
})
Then you can instantiate the child component once, and statically (not map+flatten dynamically) and it should appear/disappear according to its given state.
from cycle-onionify.
Related Issues (20)
- pickCombine fails when re-adding item with same key HOT 1
- Possible to not emit until default reducer gets run? HOT 7
- Rename lens getter/setter HOT 8
- Help needed - MemoryStream.map not producing output HOT 1
- Add mock-onionify HOT 4
- Remove the .vscode folder
- Why don't provide 'pick' and 'mix' functions in xstream? HOT 4
- Shouldn't collections docs be in readme as well as release notes? HOT 2
- Add ES6 module build
- "Reducer" term is not correct HOT 1
- pickMerge throws error if child is not using sink HOT 1
- pickMerge seems to swallow events HOT 6
- type MakeScopesFn does not exist but imported HOT 1
- Shouldn't state emissions be microtask queued? HOT 6
- emitting `xs.never` with pickCombine might be wrong HOT 13
- Action stream is probably a better definition than `reducer` stream. HOT 4
- onionify typings assume "onion" as key HOT 1
- cycle-onionify when can update for rxjs@6
- cannot compile typescript examples HOT 1
- Define Omit<T, K> properly? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cycle-onionify.