带有回调的 Reflux setState

Question

再次编辑：在此处打开 Reflux 问题：https://github.com/reflux/refluxjs/issues/544

编辑：Reflux setState 不为 setState 提供任何回调。他们要求您使用组件生命周期方法来确保在运行任何代码之前设置状态。如果您需要在没有生命周期方法的组件外部使用回流 setState，则无法保证状态已设置。这是由于 Reflux 如何执行它们的 setState。它循环所有监听组件并调用这些组件的 setState 方法。如果 Reflux 被重构为等到所有侦听组件的 setState 调用完成，然后调用传递给它自己的 setState 方法的回调，这可能有效，但可能需要对 Reflux 进行大量返工。我已经开始使用单例 class 来管理其中一些变量，因为它们完全在组件生命周期之外。

你可以在 ReactNative 中使用带有回调的 setState 还是只能在 React 中使用？我使用下面的语法，第一个调试器被命中，但第二个调试器和控制台日志永远不会被命中。

编辑：在进一步挖掘之后，似乎直接使用设置状态时不会发生这种情况，但只有当运行通过回流存储 and/or 不使用组件时才会发生这种情况。

在这里查看小吃：https://snack.expo.io/S1dm3eFoM

   debugger
    this.setState( 
          params, 
          () => {
            debugger
            console.log("CALLIN IT BACK")
          }
        )

Answer 1

我已经检查了库中的 refluxjs，问题和解决方法如下所述。

问题

库提供了一个 setState 的新实例，它与 ReactJS setState、 不完全相似，后者省略了代码中提到的回调 下面。

/dist/reflux.js

proto.setState = function (obj) {
        // Object.assign(this.state, obj); // later turn this to Object.assign and remove loop once support is good enough
        for (var key in obj) {
            this.state[key] = obj[key];
        }
        // if there's an id (i.e. it's being tracked by the global state) then make sure to update the global state
        if (this.id) {
            Reflux.GlobalState[this.id] = this.state;
        }
        // trigger, because any component it's attached to is listening and will merge the store state into its own on a store trigger
        this.trigger(obj);
    };

也如文档中所述

That store will store its state on a this.state property, and mutate its state via this.setState() in a way that is extremely similar to React classes themselves.

解决方法

该库提供了 listener 函数，它为我们提供了 ReactJS 的 setState obj 的回调，如下面的代码片段所述。

/dist/reflux.js

 componentDidMount: function() {
            var me = this;

            _.extend(me, ListenerMethods);

            this.listenTo(listenable, function(v) {
                me.setState(_.object([key],[v]));
            });
        },

您可以在下面使用它们way

this.listenTo(action, callback)

希望解惑

编辑： 根据 docs

使用

店内试听

constructor()
    {
        super();
        this.state = {count: 0};
        this.listenTo(increment, this.incrementItUp);
    }

incrementItUp()
    {
        var newCount = this.state.count + 1;
        this.setState({count: newCount});
    }

在商店外的任何地方收听

// listen directly to an action
myActions.actionName.listen(myCallbackFunc);

// listen to a child action
myActions.load.completed.listen(myCallbackFunc);

Here's the link to the snack with working callbacks based on Promises

Answer 2

我是 Reflux 的 ES6 风格 stores/component 连接的创造者。希望我能为您阐明这一点。

以下是要点：

1) Reflux 在 `setState` 调用后立即设置其存储状态。

Reflux 的 store state 不存在与 React 相同的问题，也不需要 React 的解决方法（回调）。您保证您的更改会立即反映在商店的状态中，这就是没有回调的原因。下一行代码将反映商店的新状态。

tl;dr，不需要解决方法。

// in Reflux stores this works
this.setState({foo:'foo'});
console.log(this.state.foo === 'foo') // true
this.setState({foo:'bar'});
console.log(this.state.foo === 'bar') // true

2) Store 永远不能依赖组件！

setState 会在相关组件全部更新其状态时给出回调的想法是 major 违反了所有通量原则中最基本的一条：1 路数据流。

如果您的商店需要有关组件是否在做某事的知识，那么您已经做错了，并且您遇到的所有问题都是 XY 问题，即从根本上不遵循通量。单向数据流是主要的通量原则。

这条原则的存在是有充分理由的。 Flux 不需要 1:1 将存储状态属性映射到组件状态属性。您可以将任何东西映射到任何东西，或者甚至只使用商店的状态作为您将如何运行您自己的逻辑在组件上创建全新状态属性的构建块。例如，将 loaded 和 transitioned 作为存储状态中的单独属性，但在一个组件中映射到 loadedAndTransitioned 属性，在另一个组件中映射到 notLoadedOrTransitioned您自己的自定义逻辑。这是通量的非常强大的部分。但是你的建议几乎会破坏这一切，因为 Reflux 无法映射人们的自定义逻辑。

必须保持单向数据流；商店的操作必须独立于使用它们的组件。没有这个，通量的力量就会分崩离析！

Store 监听动作，组件监听 store，从任何地方调用动作。所有基于通量的数据仅从操作 -> 存储 -> 组件流出。

带有回调的 Reflux setState

Reflux setState with a Callback

callback

setstate

react-native

1) Reflux 在 `setState` 调用后立即设置其存储状态。

2) Store 永远不能依赖组件！

带有回调的 Reflux setState

Reflux setState with a Callback

callback

setstate

react-native

1) Reflux 在 setState 调用后立即设置其存储状态。

2) Store 永远不能依赖组件！

1) Reflux 在 `setState` 调用后立即设置其存储状态。