mariusandra
commented
3 years ago Hey, indeed BindLogic works just inside React. It uses a React Context to map any logic onto any props, and will read from this mapping inside the useValues and useActions hooks, and nowhere else.
The biggest blocker for making Kea work the way you described above, is that the React component layer and the Kea logic layer have overlapping, yet separate and parallel hierarchies.
For example, you can use multipleBindLogics at the same time on different parts of your app (e.g. three engines shown at the same time on one page). Suppose you have one UserLogic (no key) that's used somewhere inside all three <BindLogics>. If it has a listener that gets EngineLogic.values.something, then what should it have bound to? UserLogic is mounted just once without a key after all.
These kinds of loose ends make it hard to support this. There might be alternative ways to make this work.
The way you can currently pass props inside a logic is via connect:
const otherLogic = kea({
key: props => props.engineName,
connect: (props) => ({
values: [EnglineLogic({ engineName: props.engineName }), ['passengers', 'ticketsSold']]
}),
actions: {
doSomething: true,
}
listeners: ({ values }) => ({
doSomething: () => {
console.log(values.passengers)
}
})
})... but that requires quite a lot of manual plumbing.
I could definitely simplify it down to something like this:
const otherLogic = kea({
key: props => props.engineName,
connect: (props) => ({
// this does not work yet
logic: [EnglineLogic({ engineName: props.engineName })]
}),
actions: {
doSomething: true,
}
listeners: ({ values }) => ({
doSomething: () => {
console.log(EnglineLogic.values.passengers)
}
})
})... but you'd still have to grab the engineName from the props in each logic, and pass it to the other one.
I don't know enough of your app to know if this would be a viable solution or just kicking the can a little bit further down the road. Would it be enough? Any other ideas on what could help? How central is EnglineLogic? Will there be multiple different engines on the screen at the same time? It may also be possible there's no automatic solution that can help... 🤔
cee-chen
👋 Hey Marius!! It's us again, hope you're doing well :)
We're using BindLogic for our keyed logic files and it's working super great for us. There's one use case that it doesn't appear to work for, which is when we're using automatic connections both inside and out of other Kea logic files. Here's our example logic that we're attempting to key:
Engines are the powerhouse of our app so we do a bunch of referencing to
EngineLogic.values.xyzall over the app. Unfortunately it looks like those aren't inheriting the keyed/bound logic and are causing console errors:Am I missing something, or is BindLogic + automatic connections not yet fully supported? I'm not sure how difficult it would be to add (I imagine very 😅), but we'd absolutely love that functionality over here if/when you have time! Thanks again for all your great work!