输入更改时重新运行订阅

Question

我正在尝试创建一个重构订阅，它从 REST API 而不是本地数据库中读取数据并将此数据保存到数据库中。 REST 调用取决于重构数据库中的其他值（想想 API-Key），虽然在应用程序中导航时此数据可用，但在重新加载时不可用。我正在学习本教程：https://github.com/Day8/re-frame/blob/master/docs/Subscribing-To-External-Data.md#some-code

我的订阅看起来像这样（为了便于阅读而删除）：

(rf/reg-sub-raw :organisation-users (fn [db [_ api-token organisation]] (when (not (nil? api-token))] (ajax/GET (str "/some-url/to/get/users/for/organisation") {:params {:api-token api-token} :handler #(rf/dispatch [:organisation-users-change %]) :format (ajax/json-request-format) :response-format (ajax/json-response-format {:keywords? true})})) (ratom/make-reaction (fn [] (:organisation-users @db)))))

订阅通过 API-Key 并从服务器请求组织用户。它 returns 更新订户的反应，以防 organisation-users 数据库发生变化，只要 rest 调用成功就会发生这种情况。

在我的组件中，我订阅了订阅：

(defn organisation-page [] (let [api-token (rf/subscribe [:api-token]) organisation-users (rf/subscribe [:organisation-users @api-token])] (fn [] [:div {:class "columns"} ))); stripped

如果我重新加载页面并在初始化（初始化 api-token）后让 organisation-page 呈现，则此代码有效。当 organisation-page 组件在加载后立即呈现时它不起作用，因为 api-token 还不可用并且它不会再次执行 rest 调用。

我还尝试将整个订阅包装到反应中，但这会导致无限循环，因为每次 organisation-users 数据库中的更改都会执行整个反应，这会再次执行其余调用，从而触发再次反应等等。

我该如何解决这个问题"the re-frame way"？我的一个想法是，如果 organisation-users 尚未填充到数据库中，则只执行 rest 调用。这可能有效，但我担心如果用户稍后导航到该页面并看到旧数据，或者如果调用不成功并且用户无法通过再次导航到该页面来启动新尝试，我会遇到问题。

Answer 1

我将用户的获取移到了一个事件中。

为了测试它，我伪造了响应，但请注意，您可以使用 http-fx 将 ajax 调用很好地嵌入到事件中（请参阅注释掉的事件）。

请注意，由于 subscription caching/deduplication.

，您可以立即取消引用订阅

(ns simple.core
  (:require [reagent.core :as r]
            [re-frame.core :refer [reg-sub
                                   reg-event-fx
                                   reg-sub-raw
                                   dispatch
                                   subscribe
                                   dispatch-sync]]))

(reg-sub
  :api-token
  (fn [db _]
    (get db :api-token)))

(reg-event-fx
  :api-token
  (fn [{:keys [:db]} [_ api-token]]
    {:db (assoc db :api-token api-token)}))

(reg-event-fx
  :good-organisation-users
  (fn [{:keys [:db]} [_ response]]
    {:db (assoc db :organisation-users response)}))

(def responses {"123" [{:name "Foo"}]
                "456" [{:name "Foo"} {:name "Bar"}]})

(reg-event-fx
  :fetch-organisation-users
  (fn [{:keys [:db]} [_ api-token]]
    (.log js/console "fetching users with api-token" api-token)
    {:dispatch [:good-organisation-users (get responses api-token)]}))

(defn fetch-users! []
  (let [api-token @(subscribe [:api-token])]
    (when api-token
      (dispatch [:fetch-organisation-users api-token]))))

(reg-sub-raw
  :organisation-users
  (fn [app-db [_]]
    (let [fetcher (r/track! fetch-users!)]
      (reagent.ratom/make-reaction
        (fn []
          (get @app-db :organisation-users))
        :on-dispose #(r/dispose! fetcher)))))

(defn organisation-page
  []
  (let [organisation-users @(subscribe [:organisation-users])]
    [:div 
     (when organisation-users
       [:ul
        (for [user organisation-users]
          ^{:key (:name user)}
          [:li (:name user)])])]))

(defn ^:export run
  []
  (dispatch [:api-token "123"])
  (js/setTimeout #(dispatch [:api-token "456"]) 3000)
  (r/render [organisation-page]
            js/klipse-container))


(run)

为了证明它有效，您可以在 http://app.klipse.tech/?container&cljs_in.gist=borkdude/f228103b2eaa04b92c5b532485fbd2ef

上实时查看

输入更改时重新运行订阅

Re-run subscription on input change

clojurescript

reagent

re-frame

输入更改时重新 运行 订阅

Re-run subscription on input change

clojurescript

reagent

re-frame

输入更改时重新运行订阅