re-frame:分派后重置atom

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-empty重置为"“(空字符串)？

Answer 1

调度完成后，您可以在ratom上使用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，以尽可能多地将逻辑排除在视图代码之外。这意味着你最终会有许多任意的事件和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进行测试，但这会有点困难。