TSYSGroupHandbook/kea.md at 8641493ed684d9161d726a9cce8ee3d6c033fe01

Charles Wyble e6f1eae94f merging in material that will be folded in

2021-08-03 21:48:37 -05:00

title	sidebar	showTitle	hideAnchor
Our Notes On Kea	Handbook	true	true

Actions

All code lives inside logic which is created with kea({ ... })
Files are typically named [name]Logic.js|ts
import { useActions } from 'kea' provides access to action all functions
All operations start from actions
The mental model for actions is that of event capturing, they signal intent
Sample action: increment: (amount) => ({ amount })
Actions map to reducers and listeners to perform operations
Actions can invoke several reducers if the name of the action maps to multiple reducers
Actions defined with someActions: true are actions with no arguments

Reducers define state and operations on that state.
import { useValues } from 'kea' provides access to the state
Sample reducers: counter: [0, { increment: (state, { amount }) => state + amount}]
Notice how increment is the same name as the action
Reducers should never mutate the state directly, they must be pure functions

Listeners are how you do side-effects and async calls to load data
Listeners may invoke other actions via actions, example: listeners: ({ actions, values }) => ({ ... })
Listeners are async functions
Notice we have access to actions and values in the listeners functions
Set this or that is better done by reacting to actions

import { useValues } from 'kea'
You can access values frorm React with useValues or from listeners via listeners function

Any of kea's built-in primitives: actions, reducers, listeners, etc. may be declared with an object or function
Functions are invoked lazily
Functions are passed 1 argument which can be destructured for actions and values
Use objects first then functions as you need them

Using kea logic as a function allows you to pass in props which are available as destructured props for primitive key functions

If you give your logic a key, you can have multiple independent copies of it. The key is derived from props
Example: key: (props) => props.id