javascript - 当条件为真时从 Redux 商店取消订阅？

Question

我正在雇用the suggestion from @gaearon在我的 redux 存储上设置一个监听器。我正在使用这种格式:

function observeStore(store, select, onChange) {
  let currentState;

  if (!Function.prototype.isPrototypeOf(select)) {
    select = (state) => state;
  }

  function handleChange() {
    let nextState = select(store.getState());
    if (nextState !== currentState) {
      currentState = nextState;
      onChange(currentState);
    }
  }

  let unsubscribe = store.subscribe(handleChange);
  handleChange();
  return unsubscribe;
}

我在 react-router 路由的 onEnter 处理程序中使用它:

Entity.onEnter = function makeFetchEntity(store) {
  return function fetchEntity(nextState, replace, callback) {
    const disposeRouteHandler = observeStore(store, null, (state) => {
      const conditions = [
        isLoaded(state.thing1),
        isLoaded(state.thing2),
        isLoaded(state.thing3),
      ];

      if (conditions.every((test) => !!test) {
        callback(); // allow react-router to complete routing
        // I'm done: how do I dispose the store subscription???
      }
    });

    store.dispatch(
      entities.getOrCreate({
        entitiesState: store.getState().entities,
        nextState,
      })
    );
  };
};

基本上，这有助于在操作完成调度(异步)时控制路由器的进程。

我的问题是我不知道在哪里调用disposeRouteHandler()。如果我在定义之后立即调用它，我的 onChange 函数将永远没有机会执行它的操作，并且我无法将其放入 onChange 函数中，因为它没有定义还没有。

在我看来这是一个先有鸡还是先有蛋的问题。非常感谢任何帮助/指导/见解。

Answer 1

怎么样:

Entity.onEnter = function makeFetchEntity(store) {
  return function fetchEntity(nextState, replace, callback) {
    let shouldDispose = false;
    const disposeRouteHandler = observeStore(store, null, (state) => {
      const conditions = [
        isLoaded(state.thing1),
        isLoaded(state.thing2),
        isLoaded(state.thing3),
      ];

      if (conditions.every((test) => !!test) {
        callback(); // allow react-router to complete routing
        if (disposeRouteHandler) {
          disposeRouteHandler();
        } else {
          shouldDispose = true;
        }
      }
    });
    if (shouldDispose) {
      disposeRouteHandler();
    }

    store.dispatch(
      entities.getOrCreate({
        entitiesState: store.getState().entities,
        nextState,
      })
    );
  };
};

尽管使用 observable 模式会带来一些认可，但您可以使用普通 js 代码解决任何困难。或者，您可以修改您的可观察值以更好地满足您的需求。例如:

function observeStore(store, select, onChange) {
  let currentState, unsubscribe;

  if (!Function.prototype.isPrototypeOf(select)) {
    select = (state) => state;
  }

  function handleChange() {
    let nextState = select(store.getState());
    if (nextState !== currentState) {
      currentState = nextState;
      onChange(currentState, unsubscribe);
    }
  }

  unsubscribe = store.subscribe(handleChange);
  handleChange();
  return unsubscribe;
}

和

Entity.onEnter = function makeFetchEntity(store) {
  return function fetchEntity(nextState, replace, callback) {
    const disposeRouteHandler = observeStore(store, null, (state, disposeRouteHandler) => {
      const conditions = [
        isLoaded(state.thing1),
        isLoaded(state.thing2),
        isLoaded(state.thing3),
      ];

      if (conditions.every((test) => !!test) {
        callback(); // allow react-router to complete routing
        disposeRouteHandler();
      }
    }

    store.dispatch(
      entities.getOrCreate({
        entitiesState: store.getState().entities,
        nextState,
      })
    );
  };
};

它确实为 onChange 添加了一个奇怪的参数，但这只是实现此目的的众多方法之一。

核心问题是，当没有任何更改时，handleChange 会立即被同步调用，稍后会被异步调用。它被称为 Zalgo .