Medium blog post

useReconciler.cljs

(defn useReconciler [reconciler effect-handler initial-state]
  (let [[state&effects set-state] (react/useState {:state initial-state})
        [state effects] ((juxt get dissoc) state&effects :state)
        dispatch (uix/callback
                   (fn [action] (set-state (fn [{:keys [state]}] (merge {:state state} (reconciler state action)))))
                   [reconciler])]
    (uix/effect!
      (fn []
        (when-not (empty? effects)
          (doseq [effect effects :let [[type payload] effect]]
            (effect-handler dispatch {:type type :payload payload}))
          (set-state {:state state})))
      [effects effect-handler dispatch])
    [state dispatch]))

(defn reconciler [state {:keys [type payload]}]
  (case type
    :buzz  {:state (assoc state :buzzed true)
            :http {:endpoint "/api/post" 
                   :params (get state :name)}}
            :play-sound {:path "/audio/buzz.mp3"}}
    :clear {:state (dissoc state :buzzed)
            :http {:endpoint "/api/post" 
                   :params (get state :room-id)}}
            :show-toast {:message "Buzzer cleared!"}}))

(defn App []
  (let [[state dispatch] (useReconciler reconciler effect-handler {:page :home})]
    [Home state]))