90 lines
3.0 KiB
Markdown
90 lines
3.0 KiB
Markdown
---
|
|
title: Our Notes On Kea
|
|
sidebar: Handbook
|
|
showTitle: true
|
|
hideAnchor: 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
|
|
|
|
- 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
|
|
|
|
- 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
|
|
|
|
## Loaders
|
|
|
|
- Available via the `kea-loaders-plugin`
|
|
- Encapsulates the pattern of action > listener > loading > success | failure
|
|
- Example: `users: [[], { loadUsers: async () => await api.get('users') }]`
|
|
|
|
## Selectors
|
|
|
|
- Selectors handle mapping data across reducers
|
|
- Similar to computed values in Vue
|
|
|
|
## Values
|
|
|
|
- `import { useValues } from 'kea'`
|
|
- You can access values frorm React with useValues or from listeners via listeners function
|
|
|
|
## Input objects vs functions
|
|
|
|
- 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
|
|
|
|
## Props
|
|
|
|
- Using kea logic as a function allows you to pass in props which are available as destructured props for primitive key functions
|
|
|
|
## Keyed logic
|
|
|
|
- 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`
|
|
|
|
## Breakpoints
|
|
|
|
- Serves as a debounce function or out of order network calls
|
|
|
|
## Events
|
|
|
|
- Handles lifecycle events
|
|
|
|
## Defaults
|
|
|
|
- Allows you to specify default values instead of doing them in the reducers
|
|
- Defaults may be a function as well to calculate the default values
|
|
|
|
## Connecting kea logic together
|
|
|
|
- You may [connect logics together](https://kea.js.org/docs/guide/additional#connecting-logic-together)
|
|
|
|
## Useful resources
|
|
|
|
- [Kea](https://kea.js.org/docs/introduction/what-is-kea)
|
|
|
|
**[Back: Technologies to learn](../technologies-to-learn)**
|