re-frame：调度后重置原子答案

【问题标题】：re-frame: reset atom after dispatchre-frame：调度后重置原子
【发布时间】：2018-10-11 22:55:50
【问题描述】：

我有这个表格：

(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 重置为“”（空字符串）？

【问题讨论】：

标签： clojurescript reagent re-frame

【解决方案1】：

你可以在调度后使用reset!在ratom上：

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

在发送值后重置它。

【讨论】：

【解决方案2】：

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

注意你也可以使用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 "")) } ]

【讨论】：

【解决方案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 进行测试，但这有点困难。

【讨论】：