重新构架:分派后重置原子

时间:2018-10-11 22:55:51

标签: clojurescript reagent re-frame

我有这种形式:

(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重置为“”(空字符串)?

3 个答案:

答案 0 :(得分:4)

分派后,您可以在{}上使用Auth::user()

reset!

在分派值后将其重置。

答案 1 :(得分:2)

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

请注意,您也可以使用#(do (re-frame.core/dispatch [:create-question @new-question]) (reset! new-question ""))

,您可能希望使用dispatch-n语法而不是fn速记函数语法:

#(...)

答案 2 :(得分:1)

您还可以同时使用事件和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}]])))

有关此代码的一些额外说明:

  • 您应该为事件和subs键命名空间,以防止命名冲突

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