inline kea

connect.jsx

import React, { Component } from 'react'
import { connect, inline } from 'kea/logic'
import { put } from 'redux-saga/effects'

import someLogic from './some/logic'

@connect({
  actions: [
    someLogic, [
      'doSomething'
    ]
  ],
  props: [
    someLogic, [
      'firstProp',
      'secondProp',
    ]
  ]
})
@inline({
  actions: () => ({
    updateName: name => ({ name })
  }),
  reducers: ({ props, actions }) => ({
    name: ['Chirpy', PropTypes.string, {
      [actions.updateName]: (state, payload) => payload.name
    }]
  }),
  selectors: ({ props, selectors }) => ({
    capitalizedName: [
      () => [selectors.name],
      (name) => name.trim().split(' ').map(k => `${k.charAt(0).toUpperCase()}${k.slice(1).toLowerCase()}`).join(' '),
      PropTypes.string
    ]
  }),
  start: function * () {
    console.log('The component was created, running base saga.')
    const something = yield someLogic.get('something')
    console.log(`value of something: ${something}`)
  },
  stop: function * () {
    console.log('The component was destroyed and the saga got cancelled')
  },
  takeEvery: (actions, workers) => ({
    [actions.updateName]: workers.updateNameWorker
  }),
  workers: {
    updateNameWorker: function * (action) {
      const { doSomething } = this.actions
      const { name } = action.payload
      console.log(`New name: ${name}`)
      
      yield put(doSomething('bla bla'))
      
      const capitalizedName = yield this.get('capitalizedName')
      console.log(`Capitalized name: ${capitalizedName}`)
    }
  }
})
class Something extends Component { 
  handleClick = () => {
    const { name } = this.props
    const { updateName } = this.props.actions
    const newName = window.propmpt('Enter a new name', name)
    
    if (newName) {
      updateName(newName) 
    }
  }
  
  render () {
    const { capitalizedName, firstProp, secondProp } = this.props
    const { doSomething } = this.actions
    
    return (
      <div>
        <div onClick={this.handleClick}>
          {capitalizedName}
        </div>
        <div onClick={doSomething}>
          {firstProp} {secondProp}
      </div>
      </div>
    ) 
  }
}