特定の日時の派遣アクション

Question

現在、Redux状態の次のカレンダーエントリをリスニングする必要があるReactアプリケーションを作成しています。

私は、これを最も効果的に行い正しい方法についてアドバイスを求めています。

マイcalendar状態の減速がで構成されています。次のイベント（イベント1）が起きようとしたとき

entries: [ 
    { 
     title: "Event 1", 
     start: "2016-09-26T08:00:00.000Z" 
     end: "2016-09-26T09:00:00.000Z" 
    }, 
    { 
     title: "Event 2", 
     start: "2016-09-26T10:00:00.000Z" 
     end: "2016-09-26T11:00:00.000Z" 
    }, 
    { 
     title: "Event 3", 
     start: "2016-09-26T13:00:00.000Z" 
     end: "2016-09-26T14:00:00.000Z" 
    } 
] 

、私はこのカレンダーエントリの状態を処理するために、イベントを送出したいと思います。エントリーレデューサーはいつでも更新できるので、次のエントリーよりも早くエントリーをプッシュできるようにする必要があります。

私はこれを処理するためにReduxとRedux Sagaを使用しています。

現在、私は次のようにReduxの佐賀リスナーで働いています：

export default function * watchCalendar() { 
    while (true) { 
     const entry = yield select((state) => state.calendar.entries[0]); 
     if (entry) { 
      const now = moment().startOf("minute"); 
      const start = moment(entry.start); 
      if (now.isAfter(start)) { 
       put(CalendarActions.setActiveEntry(entry)); 
      } 
     } 
    } 
} 

しかし、予想通りwhileが最初の試みの後に出ているとして、機能していません。私はそれが状態を聞き続けるようにする必要があります。上記は私が望むほど効果的ではありません。

アドバイス、アイデア、またはコード例は歓迎します。

UPDATE 1、2、3、4

私はまだ少し近い、ビットをハッキングしています。このような

export function * watchNextCalendarEntry() { 
    while (true) { // eslint-disable-line no-constant-condition 
     const next = yield select((state) => CalendarSelectors.getNextEntry(state.calendar)); 
     if (next) { 
      const start = moment(next.start); 
      const seconds = yield call(timeleft, start); 

      yield call(delay, seconds * 1000); 
      yield put(CalendarActions.setActiveCalendarEntry(next)); 
     } 
    } 
} 

function * currentCalendarEntry(action) { 
    try { 
     while (true) { // eslint-disable-line no-constant-condition 
      const entry = action.payload; 
      const end = moment(entry.end); 
      const seconds = yield call(timeleft, end); 

      yield call(delay, seconds * 1000); 
      yield put(CalendarActions.setInactiveCalendarEntry(entry)); 
     } 
    } 
    finally { 
     if (yield cancelled()) { 
      // e.g. do something 
     } 

    } 
} 

export function * watchCurrentCalendarEntry() { 
    while (true) { // eslint-disable-line no-constant-condition 
     const action = yield take(ActionTypes.SET_ACTIVE_CALENDAR_ENTRY); 
     const watcher = yield fork(currentCalendarEntry, action); 

     yield take(ActionTypes.SET_INACTIVE_CALENDAR_ENTRY); 
     yield cancel(watcher); 
    } 
} 

function getTimeLeft(date) { 
    return date.diff(moment().startOf("second"), "seconds"); 
} 

Answer 1

何か？

export default function* watchNextCalendarEntry() { 
    takeLatest(SUBSCRIBE_CALENDAR_ENTRY, subscribeCalendarEntry); 
} 

function* subscribeCalendarEntry({ nextEntry }) { 
    const timeLeft = moment(nextEntry.start).diff(moment()); 

    yield call(delay, timeLeft); 

    yield put(CalendarActions.setActiveCalendarEntry(nextEntry)); 
} 

あなたはアプリの開始とするとき、エントリの変更は、その後のアクションにnextEntryに計算し、パス上{ type: SUBSCRIBE_CALENDAR_ENTRY, nextEntry }アクションをディスパッチする必要があります。