Question

我正在编写一个React应用程序，我需要在我的Redux状态下监听下一个日历条目。

我正在寻求有关如何最有效和最正确地做到这一点的建议。

我的calendar州减速器包含：

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"
    }
]

当下一个事件（事件1）即将发生时，我想发送一个事件来处理这个日历条目的状态。条目缩减器可以随时更新，因此我需要能够在下一个条目之前推送条目。

我有Redux和Redux Saga处理此问题。

目前我正在与Redux Saga听众合作，如：

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在首次尝试后退出。我需要让它继续倾听国家。以上并不像我想要的那样有效。

欢迎任何建议，想法或代码示例。

更新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));
}

你需要在应用程序启动时调度{ type: SUBSCRIBE_CALENDAR_ENTRY, nextEntry }操作，当条目更改时，然后计算并将nextEntry传递给操作。

对特定日期时间的调度操作

1 个答案: