re-frame：分发后重置Atom

Question

I have this form:

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

- aarkerio

Answer 1

你可以在分发后使用 reset! 来重置 ratom：

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

在分配值后重置它。

- Daniel Compton

Answer 2

您可能想要查看re-frame effects文档：

• 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 "")) } ]

- Alan Thompson

Answer 3

你也可以同时使用事件和订阅来尽可能减少视图代码中的逻辑。这意味着你最终会得到许多事件和订阅，但这是设计上的，并且符合 re-frame 的惯例。这使得你的 re-frame 代码更易于理解、解耦和测试。以下是一个示例：

(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进行测试，只是有点困难。

- Caleb Macdonald Black