Question

我的第一个想法是创建一个Util文件并将该函数导出到所有组件。

问题是该函数涉及一个定时循环，需要在每次迭代时获取最新状态。因此，我无法传递作为参数所需的状态的一部分，因为它不会获得最新状态..只有当我传递它时的状态。

我能做到这一点的最佳方式是什么？该函数在7个不同的地方调用，涉及繁重的逻辑（调用其他函数链），因此在7个不同的地方复制和粘贴所有这些函数并不理想。

感谢您的帮助

使用一些代码进行编辑： EDIT2删除了部分代码以便于阅读

export function pageIn( compositionObj, pageObj, eActions, sActions, entitiesState, appState, aActions, playlist ) {
  // take page in
  let subcompObject = compositionObj.getSubcompositionById( pageObj.subComp.id );
  subcompObject.setPayload( pageObj.payload );
  subcompObject.playTo( 'In' );

  // if page has a duration, set a timer to take out at that specified time
  if ( pageObj.duration ) {
    let time = parseInt( pageObj.durationTime ) * 1000;
    let timerObj = undefined;

    if ( playlist.looped ) {
      timerObj = setTimeout(() => _getNextLoopedAction( compositionObj, pageObj, eActions, sActions, entitiesState, appState, aActions, playlist ), time);
    }
    else {
      timerObj = setTimeout(() => pageOut( compositionObj, pageObj, eActions, sActions ), time);
    }

    eActions.setPageProperty( pageObj.id, 'timer', timerObj, true );
  }
}

function _getNextLoopedAction( compositionObj, pageObj, eActions, sActions, entitiesState, appState, aActions, playlist ) {

  // THIS IS WHERE I WANT TO GRAB THE LATEST PLAYLIST AS THINGS MIGHT HAVE CHANGED, BUT IT ONLY GRABS THE OLD
  let playlistObj = entitiesState.playlistDict[ playlist.id ];
  let nextPageObj = _getNextPageWithDuration( pageObj, entitiesState, playlistObj );

  if ( nextPageObj ) {
    if (nextPageObj.id !== pageObj.id) {
      pageOut(compositionObj, pageObj, eActions, sActions);
    }

    if ( playlistObj.looped ) {
      pageIn(compositionObj, nextPageObj, eActions, sActions, entitiesState, appState, aActions, playlistObj);
    }
  }
}

Answer 1

如果你是：

修改redux状态
做异步的事情
传播到多个组件

解决方案将实施您自己的redux middleware，它们包含implementations以及async actions

的示例

这是redux周期中timeout实施的一个例子

/**
 * Schedules actions with { meta: { delay: N } } to be delayed by N milliseconds.
 * Makes `dispatch` return a function to cancel the timeout in this case.
 */
const timeoutScheduler = store => next => action => {
  if (!action.meta || !action.meta.delay) {
    return next(action)
  }

  let timeoutId = setTimeout(
    () => next(action),
    action.meta.delay
  )

  return function cancel() {
    clearTimeout(timeoutId)
  }
}

如何在多个组件之间共享修改Redux状态的函数？

1 个答案: