【问题标题】:How to fire Flux actions for RelayMutations如何为 RelayMutations 触发 Flux 动作
【发布时间】:2016-02-10 12:37:24
【问题描述】:

换句话说,如何在中继突变时更新本地状态(通量存储,例如 ModalStore、HistoryStore 等)。我能找到的唯一解决方案是使用回调来触发通量操作。然而,这变得非常多余和危险,因为每次使用突变时我都必须触发一个动作,并且那段代码取决于突变有效负载的形状。我有一种我不知道的更好的解决方案的感觉。

【问题讨论】:

    标签: reactjs flux reactjs-flux graphql relayjs


    【解决方案1】:

    在前往服务器之前,每个突变都会经过网络层的sendMutation 方法。一种解决方案可能是在那里拦截突变,然后触发乐观、提交和回滚 Flux 操作。

    假设对于每个名为 FooMutation 的 Relay 突变,您都有三个对应的 Flux 操作,名为 RelayMutationActions.(doOptimistic|commit|rollback)FooMutation,这样的事情可能会起作用:

    var myNetworkLayer = {
      ...Relay.DefaultNetworkLayer,
      sendMutation(mutationRequest) {
        // Pluck the mutation from the outgoing request
        const mutation = mutationRequest.getMutation();
        const mutationName = mutation.getName();
        const mutationPayload = mutation.getVariables().input;
    
        // Fire an optimistic Flux action immediately
        RelayMutationActions[`doOptimistic${mutationName}`](mutationPayload);
    
        // Pass the request on to the default network layer implementation
        return Relay.DefaultNetworkLayer.sendMutation(mutationRequest)
          .then(payload =>
            if (payload.hasOwnProperty('errors')) {
              // If there was an error, fire a new rollback Flux action
              RelayMutationActions[`rollback${mutationName}`](payload);
            } else {
              // Otherwise fire a Flux action that commits the transaction
              RelayMutationActions[`commit${mutationName}`](payload);
            }
          );
      },
    };
    Relay.injectNetworkLayer(myNetworkLayer);
    

    【讨论】:

    • 这是一个很棒的全局解决方案,但是我也发现 Relay.Store.Update(FooMutation(), {onSuccess: () => { //handle success }, onFailure: () = > { //handle failure} }) 在更具体的规模上效果很好。想法?
    • 哦,当然;那是另一种设计。我认为当您说“……这变得非常多余和危险,因为每次使用该突变时我都必须触发一个动作”时,您表示您希望避免这种本地化解决方案。
    • 糟糕!抱歉……是@OguzBilgic 说的,不是你!
    • 是的,我没有问这个问题,刚刚开始赏金。直到我开始赏金之后,我才完全理解 OP 的解决方案。您的解决方案符合原始问题!谢谢:)
    猜你喜欢
    • 2016-11-20
    • 2017-11-27
    • 1970-01-01
    • 2017-04-03
    • 2018-12-24
    • 2021-10-03
    • 2015-08-19
    • 2015-09-21
    • 2015-10-16
    相关资源
    最近更新 更多