### Run RFX Examples

Source: https://github.com/factorhouse/rfx/blob/main/README.md

Steps to clone the RFX repository, install npm packages, and start the shadow-cljs development server to run example applications. The server automatically reloads on code changes.

```bash
git clone git@github.com:factorhouse/rfx.git
npm install
npx shadow-cljs watch rfx-todomvc
open http://localhost:8000/
```

--------------------------------

### Install RFX Core API

Source: https://github.com/factorhouse/rfx/blob/main/README.md

This snippet demonstrates how to include the main RFX library in your `deps.edn` file. This is the recommended approach for new projects or when fully adopting RFX's hook-based API.

```clojure
;; deps.edn
{:deps {io.factorhouse/rfx {:mvn/version "0.1.18"}}}
```

--------------------------------

### RFX Hooks API Usage Example

Source: https://github.com/factorhouse/rfx/blob/main/README.md

This example showcases the RFX hooks API within a HSX component. It demonstrates how to register a subscription (`reg-sub`), register an event handler (`reg-event-db`), and use `use-dispatch` and `use-sub` hooks to interact with the RFX state.

```clojure
;; (require '[io.factorhouse.rfx.core :as rfx])

(rfx/reg-sub :counter (fn [db _] (:counter db)))

(rfx/reg-event-db :counter/increment (fn [db _] (update db :counter inc)))

(defn my-root-component []
  (let [dispatch (rfx/use-dispatch)
        counter  (rfx/use-sub [:counter])]
    [:div {:on-click #(dispatch [:counter/increment])} 
     "The value of counter is " counter]))
```

--------------------------------

### RFX Context Provider Setup

Source: https://github.com/factorhouse/rfx/blob/main/README.md

Demonstrates how to set up the `RfxContextProvider` to manage RFX instances within your React application. It shows both using the global RFX instance and initializing a custom, scoped context with initial state.

```clojure
;; (:require [io.factorhouse.rfx.core :as rfx])

;; Option 1: Use global application state (like re-frame)
;; Wrapping your root component with no explicit RfxContextProvider uses the global RFX instance:
[:my-root-component] ;; Equivalent to [:> rfx/RfxContextProvider #js {} [my-root-component]]

;; Option 2: Initialize your own scoped context
(defonce custom-rfx-ctx (rfx/init {:initial-value {:foo :bar}}))

[:> rfx/RfxContextProvider #js {"value" custom-rfx-ctx}
 [:my-root-component]]
```

--------------------------------

### Install re-frame-bridge for RFX Migration

Source: https://github.com/factorhouse/rfx/blob/main/README.md

This snippet shows how to add the `re-frame-bridge` library to your `deps.edn` file. This library acts as a compatibility layer, allowing existing re-frame codebases to use RFX with minimal changes, facilitating migration from Reagent.

```clojure
;; deps.edn
{:deps {io.factorhouse/re-frame-bridge {:mvn/version "0.1.18"}}}
```

--------------------------------

### RFX Instance Configuration

Source: https://github.com/factorhouse/rfx/blob/main/README.md

Details the configuration options available when initializing an RFX instance using `rfx/init`. Covers parameters like event queue, error handler, store, initial value, and registry.

```APIDOC
rfx/init accepts a map with the following keys:

| Key | Required? | Description |
|-----|:--------:|-------------|
| :queue | ❌ | The event queue used to process messages. Default queue is the same as re-frame's (uses goog.async.nextTick to process events) |
| :error-handler | ❌ | Error handler (default ErrorHandler is the same as re-frame's - something that logs and continues) |
| :store | ❌ | The store used to house your application's state. Default store is backed by a Clojure atom. |
| :initial-value | ❌ | The initial value of the store. Default is `{}`. |
| :registry | ❌ | The event+subscription registry the RFX instance will use. Defaults to the global registry.
```

--------------------------------

### Storybook Integration with RFX

Source: https://github.com/factorhouse/rfx/blob/main/README.md

Demonstrates how to integrate RFX components with Storybook for isolated component testing. Each story operates within its own context, facilitating component-driven development.

```clojure
(defmethod storybook/story "Kpow/Sampler/KJQFilter" [_]
  (let [{:keys [dispatch] :as ctx} (rfx/init {})]
    {:component [:> rfx/RfxContextProvider #js {"value" ctx} [kjq/editor "kjq-filter-label"]]
     :stories   {:Filter     {}
                 :ValidInput {:play (fn [_]
                                      (dispatch [:input/context :kjq "foo"])
                                      (dispatch [:input/context :kjq "foo"]))}}}))
```

--------------------------------

### RFX reg-fx Implementation

Source: https://github.com/factorhouse/rfx/blob/main/README.md

Details the implementation of `reg-fx` in RFX. When using `re-frame-bridge`, it's identical to re-frame. Otherwise, `io.factorhouse.rfx.core/reg-fx` takes two arguments: the RFX instance and the value.

```clojure
(require '[io.factorhouse.rfx.core :as rfx])

(rfx/reg-fx ::some-fx
  (fn [rfx value]
    (let [curr-db (rfx/snapshot rfx)]
      (-> curr-db :some-f value))))
```

--------------------------------

### RFX Subscription Shims

Source: https://github.com/factorhouse/rfx/blob/main/README.md

Explains that all RFX subscriptions are React Hooks, including the shim for `re-frame.core/subscribe`. This allows RFX to be used with various React wrappers and plain JavaScript, adhering to React Hooks rules.

```clojure
(rf/reg-sub :a-sub :-> name) ;; supported
(rf/reg-sub :b-sub :<- [:a-sub] (fn [a-sub _] (keyword a-sub))) ;; supported
(rf/reg-sub :c-sub (fn [_] (subscribe [:b-sub])) (constantly :not-supported)) ;; not supported
```

--------------------------------

### RFX Interaction Outside React

Source: https://github.com/factorhouse/rfx/blob/main/README.md

Explains how to interact with RFX from systems external to React, such as routers or WebSocket connections. It covers dispatching events with an RFX instance and accessing subscription values.

```clojure
(defonce rfx-context (rfx/init {}))

;; Some imaginary ws-instance 
(.on ws-instance "message" #(rfx/dispatch rfx-context [:ws/message %]))
```

```clojure
(defn init []
  (let [rfx (rfx/init {})]
    (init-ws-conn! rfx)
    (init-reitit-router! rfx)
    (render-my-react rfx)))
```

```clojure
(defn codemirror-autocomplete-suggestions 
  [rfx]
  (let [database-completions (rfx/snapshot-sub rfx [:ksql/database-completions])]
    ;; Logic to wire up codemirror6 completions based on re-frame data goes here
    ))
```

```clojure
(defn init []
  (let [rfx (rfx/init {})]
    (init-ws-conn! rfx)
    (init-reitit-router! rfx)
    (render-my-react rfx)))
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.