connected components don't work with dynamic logic

Thanks for this project, it works great, definitely a great help and less boilerplate for redux.

I’m trying to use the connect feature of kea and come up with the following issues:

1. connect only seems to work if a path is defined, otherwise kea creates a new namespace for the second component. This could be improved in the documentation.

2. connect doesn’t work if the logic has a key setting, it gives the following error:

[KEA-LOGIC] selector "value" missing for logic: function response(Klass) {
...

Is there a way to use connect with a dynamic component?

Here is an example code I’m using (in react native):

const keaItem = {
  // path: () => ['scenes', 'item'], (1)
  // key: props => props.name, (2)
  // path: key => ['scenes', 'item', key], (2)
  actions: () => ({
    toggle: true,
  }),
  reducers: ({ actions, key, props }) => ({
    value: [
      false,
      PropTypes.bool,
      {
        [actions.toggle]: (state, payload) => {
          return !state
        },
      },
    ],
  }),
}
const itemLogic = kea(keaItem)

export class Item extends React.Component {
  render() {
    return (
      <View>
        <Title>Item</Title>
        <Text>Value: {this.props.value ? 'true' : 'false'}</Text>
        <Button onPress={this.actions.toggle}>
          <Text>Toggle</Text>
        </Button>
      </View>
    )
  }
}
const ConnectedItem = kea(keaItem)(Item)

export class Other extends React.Component {
  render() {
    return (
      <View>
        <Title>Other</Title>
        <Text>Value: {this.props.value ? 'true' : 'false'}</Text>
      </View>
    )
  }
}

const keaOther = {
  connect: {
    props: [itemLogic, ['value']],
  },
}
const ConnectedOther = kea(keaOther)(Other)

export default class Container extends React.Component {
  render() {
    return (
      <View>
        <Title>Container</Title>
        <ConnectedItem name="demo" />
        <ConnectedOther name="demo" />
      </View>
    )
  }
}

[mariusandra]

I pushed out v0.28.2 that addresses the issues mentioned above, but doesn’t solve all open issues with these dynamic connected withKey logic stores.

What works now, but didn’t in 0.28.1

1. You may also use .withKey(props => props.id) with actions, so like this:

@connect({
  actions: [
    dynamicLogic.withKey(params => params.id), [
      'doit'
    ]
  ],
  props: [
    dynamicLogic.withKey(params => params.id), [
      'done'
    ]
  ]
})

This way the key is automatically added to the actions.

1. You may now add propTypes: {} to either @connect({}) or @kea({}) and they will be added to your component. Try it with propTypes: { bla: PropTypes.number.isReuired } and see the error!

2. There was a conflict with actions and multiple instances of a dynamic logic store (with a different key). Only the first version got cached and all actions used the same key. This is fixed.

The issues that are still out there:

1. When connecting to a withKey logic store, you can only select reducers. Everything that was in selectors will be invisible.

2. The logic store that contains the data needs to be wrapped around a component. You can’t just create it and then only @connect to it from other logic stores. It has to wrap a React component.

3. I still need to write tests.

All help with testing, reporting bugs, writing documentation, etc is much appreciated! 😃

[mariusandra]

Kea 1.0 addresses many of these issues. See here for an example of connecting to dynamic logic with props: https://kea.js.org/api/kea

I’m closing this issue now. Feel free to comment/reopen or make a new issue if there are problems/questions with the new implementation.