2017-09-29 36 views
0

我的第一个想法是创建一个Util文件并将该函数导出到所有组件。如何共享修改多个组件之间的Redux状态的功能?

虽然问题是该函数涉及一个定时循环,需要在每次迭代中获取最新状态。所以我不能通过国家的一部分需要作为参数,因为它不会得到最新的状态..只有当我通过它的状态。

我可以完成这个最好的方法是什么?该功能在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); 
    } 
    } 
} 
+0

你可以添加一些代码来演示吗?在一个高层次 - 听起来像你应该有一个共享行动,多个减速器响应和多个连接组件更新(难以从您的最初问题中辨别)dispar –

+0

@GeoffreyAbdallah添加了一些代码,告诉你我通常如何做事(这些函数位于Util文件中,我传入Actions作为参数来调用事件和状态的一部分)。不幸的是,通过这种方式,我无法获得迭代中最新的状态 – user1189352

回答

1

如果你是:

  • 修改还原状态
  • 做异步填充
  • 传播到多个组件

一个解决方案将实施的implementations自己redux middleware,他们有实例以及async actions

这是终极版周期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) 
    } 
} 
相关问题