Prop values in selectors - retrieving via an inline selector doesn't seem to work correctly

We are attempting to use a Prop inside of a Selector.

We’re following this suggestion: https://kea.js.org/docs/guide/advanced#props-in-selectors

However, for whatever reason, we cannot seem to get access to props inside the inline selector as described in the documentation.

Here is a quick snippet I built on https://npm.runkit.com/kea to illustrate the issue.

require("react/package.json"); // react is a peer dependency. 

require ("react-dom");

require("react-redux/package.json"); // react-redux is a peer dependency. 

require("redux/package.json"); // redux is a peer dependency. 

require("reselect/package.json"); // reselect is a peer dependency. 
var kea = require("kea")

const logic = kea.kea({ 
  selectors: ({ props }) => ({
        valueFromSelectorsProps: [
            () => [],
            () => props.foo
        ],
        valueFromInlineSelectorProps: [
            () => [
                // inlineProps is an empty object here, it should be the props which I passed into the 'build' method
                (_, inlineProps) => inlineProps.foo
            ],
            (foo) => foo
        ],
  })  
})

logic.build({ foo: 'foo' })
logic.mount();

console.log(logic.values.valueFromSelectorsProps);
// "foo" --- It works!

console.log(logic.values.valueFromInlineSelectorProps);
// undefined --- It doesn't seem to work!

As you can see, I attempt to use the 2 different methods of accessing props as described in the docs. Both should work, right? For whatever reason though, I cannot get inline selector method to work.

Anyone have a second to take a look at this? Could just be user error.

[mariusandra]

Fixed in 2.3.5 😃

Turns out .mount() was basically calling .build().mount() and the default props in .build(props = {}).mount() were overriding the ones stored on the built logic. Since no other test broke, I just released the fix in a patch version.

The const instance = logic.build(props) approach makes sense if you’re using keyed logic. Then each instance will have a different set of props attached to it.

And thanks for all the warm feedback! 😊

[mariusandra]

Hey, that’s indeed the right approach. If you call logic.mount(), it’ll basically run logic.build({}).mount() behind the scenes, thus resetting the props you gave with logic.build({ foo: 'foo' }) just one line earlier.