clojurescript - re-frame：调度后重置原子

Question

我有这个表格：

(defn input-question
  []
 (let [new-question (reagent/atom "")]
  (fn []
  [:div
   [:input {:type      "text"
            :value     @new-question
            :on-change #(reset! new-question (-> % .-target .-value))}]
   [:input {:type     "button"
            :value    "Save new question"
            :on-click #(re-frame.core/dispatch [:create-question @new-question])} ] ])))

调度后如何将@new-question 重置为“”（空字符串）？

Answer 1

您可以reset!在调度后在鼠尾草上使用：

#(do (re-frame.core/dispatch [:create-question @new-question])
     (reset! new-question ""))

在发送值后重置它。

Answer 2

您可能想查看重新框架效果文档：

• https://github.com/Day8/re-frame/blob/master/docs/EffectfulHandlers.md
• https://github.com/Day8/re-frame/blob/master/docs/Effects.md

请注意，您还可以使用dispatch-n：

• https://github.com/Day8/re-frame/blob/master/docs/API.md#dispatch-n

并且您可能希望使用fn语法而不是#(...)速记函数语法：

:input {:type     "button"
        :value    "Save new question"
        :on-click (fn []
                     (re-frame.core/dispatch [:create-question @new-question])
                     (reset! new-question "")) } ]

Answer 3

您还可以同时使用事件和 subs 来尽可能多地保留视图代码之外的逻辑。这意味着您最终会遇到许多事件和子事件，但这是设计和惯用的重新构建。这使您的重构代码更易于理解、解耦和更易于测试。这是一个例子：

(rf/reg-fx
  :save-question
  (fn [question]))
    ;; Handle creating a question

(rf/reg-sub
  :new-question-value
  (fn [db _]
    (get-in db [:new-question :value])))

(rf/reg-event-db
  :on-new-question-change
  (fn [db [_ value]]
    (assoc-in db [:new-question :value] value)))

(rf/reg-event-fx
  :on-save-question-click
  (fn [{:keys [db]} _]
    {:db              (assoc-in db [:new-question :value] "")
     :save-question   (get-in db [:new-question :value])}))


(defn input-question
  []
  (let [new-question-value       (rf/subscribe [:new-question-value])
        on-save-question-click   #(rf/dispatch [:on-save-question-click])
        on-new-question-change   #(rf/dispatch [:on-new-question-change (.. % -target -value)])]
    (fn []
      [:div
       [:input {:type      "text"
                :value     @new-question-value
                :on-change on-new-question-change}]
       [:input {:type     "button"
                :value    "Save new question"
                :on-click on-save-question-click}]])))

关于此代码的一些额外说明：

• 您应该命名您的事件和子键以防止命名冲突

• 您应该定义一个函数并将其传递给reg-fx, reg-event-db, reg-event-fx& reg-sub。这样做可以通过允许测试代码直接调用函数处理程序来使代码更具可测试性。但是，您仍然可以使用Day8/re-frame-test 进行测试，但这有点困难。