Redux-Kotlin Documentation

Redux-Kotlin follows the same core principles as Redux and Flux for the web. To build an application, you need to understand and implement four fundamental concepts:

1. Actions: Objects that describe what happened in the application.
2. Reducers: Functions that specify how the application's state changes in response to actions.
3. Store: The object that holds the application state and allows access to it.
4. Data Flow: The unidirectional cycle of how actions are dispatched to the store and how reducers update the state.

This guide is structured to walk you through creating a simple Todo app by mastering these components individually.

The Docs Site UI Kit recreates the canonical brand surface of ReduxKotlin using Docusaurus (classic preset + Infima). It includes the following core components:

The rk-devtools CLI is a JVM-based tool designed to host the DevTools bridge receiver. It allows developers to capture Redux store activity into .jsonl files and query them using Compose-free subcommands.

Key Capabilities:

• Capture: Writes per-store .jsonl recordings containing action, state, and diff logs.
• Query: Provides subcommands to inspect captured data without a GUI:
  • actions: List actions.
  • diff: View state differences.
  • state: Inspect current state.
  • tail: Follow new actions.
  • stores: Discover available stores.
• Serve: Can launch the bundled GUI (reusing redux-kotlin-devtools-standalone).

Architecture Layers:

1. capture/: A pure, Compose-free library for reading .jsonl files.
2. server/: A writer that snapshots MonitorIngest data to disk.
3. command/: A Clikt-based frontend for CLI interaction.

The rk binary provides two primary functional groups:

1. rk devtools ...: Used to inspect a running redux-kotlin application. This includes viewing action logs, JSON diffs, and per-store .jsonl captures via the devtools bridge. Subcommands include serve, stores, actions, diff, state, and tail.
2. rk snapshot ...: Used to render built-in or manifest Compose scenes to PNG files using golden diffing.

Important: The rk binary is designed to render its own built-in demo scenes. To render screens from your own application, you should use the redux-kotlin-snapshot library instead of the CLI binary.

rk --help
rk --version

The In-App DevTools UI Kit is a Material 3 Expressive mobile showcase designed for the In-App Redux DevTools. It provides a high-fidelity, motion-rich interface for inspecting Redux state, actions, and pipelines directly within a mobile or multiplatform application.

It is designed to be adaptive, supporting two primary layouts based on screen width:

• Compact (Phone): Uses a ModalBottomSheet triggered by a floating bubble or edge-swipe to show the five DevTools tabs.
• Expanded (Tablet/Desktop): Uses a persistent right-docked panel that displays the action log and inspector (State, Diff, Pipeline, Outputs) simultaneously.

To use this in a real application (such as a Compose Multiplatform app), you should wire devTools() and ReduxDevToolsHost { } to connect the UI to your live application state.

The iOS host uses the following Swift files to render the Compose Multiplatform UI:

• iosApp/iOSApp.swift: The @main SwiftUI App entry point.
• iosApp/ContentView.swift: Contains ComposeView, which implements UIViewControllerRepresentable. It wraps MainViewControllerKt.MainViewController() and is rendered edge-to-edge using .ignoresSafeArea(.all).

The redux-kotlin package provides the fundamental Redux contract. It includes the following core abstractions and functions:

• Store / TypedStore: The central state container.
• Reducer: Functions that specify how the state changes in response to actions.
• Middleware: Functions that provide a third-party extension point between dispatching an action and the moment it reaches the reducer.
• createStore: The primary function to instantiate a new store.
• applyMiddleware: A utility to compose middleware into the store creation process.
• combineReducers: A utility to turn multiple reducers into a single reducer managing a state tree.
• compose: A utility to compose multiple functions (often used for middleware or reducer composition).

The redux-kotlin-snapshot tool is a JVM/desktop development utility used for headless visual regression testing. It treats the UI as a pure function of state (f(state) → UI).

Core Workflow:

1. Seed: It seeds a real redux-kotlin store with a known state.
2. Render: It renders the resulting Compose frame headlessly to a PNG.
3. Compare: It compares the rendered PNG against a committed "golden" PNG to detect visual regressions.
4. Report: For batch runs, it generates a static HTML dashboard for easy visual inspection of differences.

This tool is the visual counterpart to logic testing; while reducer/selector tests verify business logic, snapshots verify that a specific state produces the intended rendered frame.

The redux-kotlin-devtools module is a Kotlin Multiplatform (KMP) companion module designed to integrate Redux-Kotlin stores with the standard Redux DevTools Remote monitor (@redux-devtools/cli).

It works by providing a StoreEnhancer via the devTools(config) function. This enhancer wraps the store and, upon every dispatch, streams the dispatched actions and the current state to the DevTools monitor over a WebSocket.

Key Features:

• KMP Support: Works across js, wasmJs, jvm, iosArm64, iosSimulatorArm64, macosArm64, linuxX64, mingwX64, and android.
• Tiered Serialization: Uses reflection on JVM/Android for rich data, toString() on other targets, and supports @Serializable overrides.
• Non-destructive: Uses a LiftedStateRecorder for bookkeeping without enabling time-travel capabilities within the module itself.