kea

In Kea 1.0+, all plugins and configuration options must be defined on the context rather than passed to individual kea() calls. The recommended way to initialize your application is to call resetContext() at a high level in your app. This is particularly useful for server-side rendering as it allows you to clear the cache for each render.

To set up your application:

1. Call resetContext() with your desired plugins and options.
2. Retrieve the store from the context using getContext().
3. Pass that store to your React-Redux <Provider>.

// 1. Initialize context with plugins and options
resetContext({
  plugins: [sagaPlugin, localStoragePlugin],
  // other options like defaults, plugin config, redux strategy, etc.
});

// 2. In your App component, get the store and provide it
function App ({ children }) {
  const { store } = getContext()
  return (
    <Provider store={store}>
      {children}
    </Provider>
  )
}

In Kea, selectors are designed to be reactive to both the global state and the local logic props. When defining a selector via selectors(), the input function provides two specialized objects:

1. selectors: Access to other selectors defined within the same logic. This allows for composing selectors.
2. propSelectors: A proxy-like object used to access the logic's props. Instead of accessing props.id directly, you use the propSelectors to return a function that retrieves the prop. This ensures the selector remains memoized and correctly tracks prop changes.

Example Pattern:

selectors({
  // A base selector accessing state
  duckId: [(s) => [s.duckId], (id) => id],
  
  // A composed selector using another selector and a prop
  duckAndChicken: [
    (s, p) => [s.duckId, p.id], // s.duckId is the selector above, p.id is a prop
    (duckId, id) => duckId + id
  ]
})

The Kea context is the central registry for plugins, stores, and logic. You manage its lifecycle using openContext, closeContext, and resetContext.

• openContext(options, initial): Creates and activates a new context. If a context is already open, it will log an error to the console. By default, it automatically creates a Redux store unless createStore: false is passed in the options.
• closeContext(): Tears down the current context and triggers beforeCloseContext plugin events.
• resetContext(options, initial): A convenience method that closes the existing context and opens a new one with the provided options.
• getContext(): Retrieves the currently active context.

Note on Store Creation: The Redux store is lazily initialized. It is created the first time context.store is accessed, unless you provide a custom store via options.createStore or set createStore: false.

Kea provides several React hooks to interact with logic.

• useValues(logic): Returns the state of the logic's values. Note: This hook returns getters that call useSelector under the hood. You must directly destructure the returned object (e.g., const { name } = useValues(logic)) and not store the whole object in a variable to use later.
• useAllValues(logic): Use this if you need to store the entire values object in a variable for later use. This is the safe alternative to storing the result of useValues.
• useActions(logic): Returns the actions defined in the logic.

Logic is automatically mounted and unmounted when using these hooks in a component.

function NameComponent () {
  const { name } = useValues(logic) // Destructure directly
  const { updateName } = useActions(logic)

  return (
    <div>
      <div>Name: {name}</div>
      <button onClick={() => updateName('George')}>Change</button>
    </div>
  )
}