wrap

Wrap components

If you wrap your Component inside a logic, it'll get all the values and actions as props.

This works for both class and functional components.

const logic = kea([
  actions({
    doSomething: true,
    doSomethingElse: true,
  }),
  reducers({
    firstOne: ['default', { doSomething: () => 'did it' }],
    secondOne: ['default', { doSomething: () => 'did it' }],
  }),
])

class MyComponent extends Component {
  render() {
    const { firstOne, secondOne } = this.props

    // The following two lines are equivalent as
    // `this.actions` is a shorthand for `this.props.actions`
    const { doSomething, doSomethingElse } = this.actions
    const { doSomething, doSomethingElse } = this.props.actions

    return <div />
  }
}

// Two identical lines, as `logic(Component)` is a shorthand for `logic.wrap(Component)`
const MyConnectedComponent = logic(MyComponent)
const MyConnectedComponent = logic.wrap(MyComponent)

Questions & Answers

Ask questions about this page here.