Question

我在使用Om.next中输入字段的数据更新状态时遇到问题。

Om.next中的读状态通过查询解决，查询使组件能够实现独立于上下文的获取状态，这很好，因为这意味着组件不需要知道状态原子的结构，它只需要理解与其直接相关的状态原子的局部片段。

不幸的是，我还没有能够确定一种在相反方向上做到这一点的方法，即根据用户与组件的交互来改变状态，而不是将其与组件相结合。组件在状态原子中的位置。

Web上的大多数示例都有mutate函数，可以从根开始修改state atom中的特定路径。

(defonce app-state (atom {:badge {:credentials {:user "" :password ""}}}))

所以现在我去渲染组件：

Object
(render [this]
(dom/div nil
       (dom/input #js {:onChange ???
                       :value {:user value}})
       (dom/input #js {:onChange ????
                       :value {:password value}})))

这是一个相当粗略的例子，但是如何在用户输入时更新状态，而不会将其存储在路径[:badge :credentials]下的事实中？

读取的范围是查询，但突变不是。这是一个简单的人为例子，但是当我尝试使用（在编码时）未知形状渲染和更新嵌套树时，情况会变得更糟。

Answer 1

您的:onChange可以调用您的一个突变：

:onChange (fn [_] (om/transact! this `[(app/set-name { :person 1 :name ~n })]))

除了参数和调用变异的位置之外，没有耦合 - 变异只不过是名称 - 这里app/set-name。当然，必须实施突变。这是：

(defmethod m/mutate 'app/set-name
  [{:keys [state] :as env} key {:keys [person name] :as params}]
  {:action (fn []
    (swap! state update-in [:people/by-id person] assoc :person/name name))})

变异代码本身将处理规范化的app-state，这意味着数据的结构形状不是树。

此示例取自：http://localhost:3449/#!/untangled_devguide.G_Mutation

更新Om.next

1 个答案: