clojurescript - 在 Reagent/Clojurescript 中向 UI 显示错误的模式

Question

我经常发现自己在使用 Reagent 应用程序时会做这样的事情。

(defn create-account [user-details error-ref]
  (let [validation-errors (do-validations user-details)]
    (if validation-errors
      (reset! error-ref validation-errors)
      (finish-create))))


(defn component []
   (let [user-details (atom {:email "" :password ""})
          ui-errors (atom nil)]
        (fn []
          [:div.Page
            (if @ui-errors
              [:p @ui-errors])
            [:input {:type "text" :placeholder "EMAIL" :on-change #(swap! user-details conj {:email (-> % .-target .-value)})}]
            [:input {:type "password" :placeholder "PASSWORD" :on-change #(swap! user-details conj {:password (-> % .-target .-value)})}]
            [:button.bottomMargin {:on-click #(create-account @user-details ui-errors)} "Submit"]])))

我将在其中设置一个原子来处理存储发生的任何错误并将其传递到我的注册流程中。这非常简单，因为我可以用任何错误更新原子并将它们显示给用户。

我担心的是这感觉不太实用。我知道我在我的 block 中更新了这个原子，这感觉像是破坏函数纯度的副作用。我也不喜欢为了在错误状态下进行更新而将原子传递到我的函数中的唯一目的。

我想如果我想向我的用户显示错误，我将不得不在我的代码中的某个时刻产生副作用，但我想看看是否有更好的或接受的模式来这样做。我觉得我的植入工作正常，但功能不如我喜欢，如果处理或验证数据的流程增加，可能难以维护。

Answer 1

像这样将状态放在它自己的命名空间中的单个原子中。警告:我还没有实际测试过这段代码。

(ns my.app.db
  (:require [reagent.ratom :as r]))

(def default-db {})

(def my-db (r/atom default-db))

(defn init-db! []
  (reset! my-db default-db))


(defn new-account [user]
  (let [validation-errors (do-validation user)]
    (if validation-errors
      {:valid? false :errors validation-errors}
      {:valid? true :user user})))


(defn create-account! [user]
  (swap! my-db assoc :account (new-account user)))

然后在你的 UI 代码中:

(ns my.app.ui
  (:require [my.app.db :as db]))

(defn user-form [{:keys [valid? user errors]}]
  (fn []
    [:div.Page
      (if-not valid?
        [:p errors])
     [:input {:type "text" :placeholder "EMAIL"
              :on-change #(swap! db/my-db assoc-in [:account :user :email] (-> % .-target .-value))
              :default-value (:email user)}
      [:input {:type "password" :placeholder "PASSWORD"
               :on-change #(swap! db/my-db assoc-in [:account :user :password] (-> % .-target .-value))
               :default-value (:password user)}]
      [:button.bottomMargin {:on-click #(db/create-account! user)} "Submit"]]]))


(defn parent-component []
  (let [db @db/my-db]
    (fn []
      [user-form (:account db)])))

您可能还需要添加一个检查，如果表单是脏的，添加另一个属性到 :account 映射，这样您就不会在 user 为 nil 时尝试显示错误。但是这样的事情很快就会变得困惑，所以我建议你使用类似 fork 的东西。对于表单管理，它与试剂配合得很好。