Question

在redux商店中存储/处理重复事件的正确方法是什么？

问题：假设我们有一个后端API，它通过复杂的业务逻辑生成重复事件。某些事件可能具有相同的ID。让我们说生成的输出看起来像这样：

[
  {
    "id": 1,
    "title": "Weekly meeting",
    "all_day": true,
    "starts_at": "2017-09-12",
    "ends_at": "2017-09-12"
  },
  {
    "id": 3,
    "title": "Daily meeting1",
    "all_day": false,
    "starts_at": "2017-09-12",
    "ends_at": "2017-09-12",
  },
  {
    "id": 3,
    "title": "Daily meeting1",
    "all_day": false,
    "starts_at": "2017-09-13",
    "ends_at": "2017-09-13",
  },
  {
    "id": 3,
    "title": "Daily meeting1",
    "all_day": false,
    "starts_at": "2017-09-14",
    "ends_at": "2017-09-14",
  }
]

可能的解决方案是：通过使用如下组成的附加属性uid生成唯一ID：id + # + starts_at。这样我们就可以唯一地识别每个事件。（我现在正在使用它）

示例：

[
  {
    "id": 1,
    "uid": "1#2017-09-12",
    "title": "Weekly meeting",
    "all_day": true,
    "starts_at": "2017-09-12",
    "ends_at": "2017-09-12"
  }
]

我想知道是否有其他方式，也许比组成独特的id更优雅？

Answer 1

您当前的解决方案可能存在缺陷。如果两个事件的id和start_id相同，会发生什么？您的域名中是否存在可能的情况？

因此我通常在这种情况下使用this nice lib。它产生非常短的唯一ID，它具有一些很好的属性，例如保证不相交，不可预测等等。

还要问问自己，在你的情况下你是否真的需要独特的ID。看起来你的后端无论如何都没有机会区分事件，为什么要这么麻烦呢？ Redux商店将很乐意在没有uid的情况下举办活动。

Answer 2

也许没有太大改进（如果有的话），但仅使用JSON.stringify检查重复项可能会使唯一ID过时。

const existingEvents = [
  {
    "id": 3,
    "title": "Daily meeting1",
    "all_day": false,
    "starts_at": "2017-09-14",
    "ends_at": "2017-09-14",
  }
];

const duplicate = {
    "id": 3,
    "title": "Daily meeting1",
    "all_day": false,
    "starts_at": "2017-09-14",
    "ends_at": "2017-09-14",
};

const eventIsDuplicate = (existingEvents, newEvent) => {
    const duplicate = 
    existingEvents.find(event => JSON.stringify(event) == JSON.stringify(newEvent));
    return typeof duplicate != 'undefined';
};

console.log(eventIsDuplicate(existingEvents, duplicate)); // true

我想如果出于某种原因，您希望在客户端保留所有唯一性逻辑，那么这只会优于您现有的解决方案。

Answer 3

据我所知，您提供的示例似乎服务器在事件的详细信息发生变化时发送特定事件。

如果是这样，并且您想要跟踪事件的更改，那么您的形状可能是一个对象数组，其中包含保存当前数据的事件的所有字段，以及一个包含所有数据的历史属性前一个（或最近的n个）事件对象以及接收它们的时间戳。这就是减速器的外观，仅为每个事件存储最近五次的事件更改。我希望该操作具有payload属性，该属性具有标准event属性和时间戳属性，可以在操作创建者中轻松完成。

const event = (state = { history: [] }, action) => {
  switch (action.type) {
    case 'EVENT_FETCHED':
      return ({
        ...action.payload.event,
        history: [...state.history, action.payload].slice(-5),
      });
    default:
      return state;
    }
  };


const events = (state = { byID: {}, IDs: [] }, action) => {
  const id = action.payload.event.ID;
  switch (action.type) {
    case 'EVENT_FETCHED':
      return id in state.byID
        ? {
          ...state,
          byID: { ...state.byID, [id]: event(state.byID[id], action) },
        }
        : {
          byID: { ...state.byID, [id]: event(undefined, action) },
          IDs: [id],
        };
    default:
      return state;
  }
};

这样做，您不需要任何唯一ID。如果我误解了你的问题，请告诉我。

编辑：这是Redux文档中pattern的略微扩展，用于存储以前的事件。

Answer 4

最后，这是我实施的目的（仅用于演示目的 - 省略不相关的代码）：

eventRoot.js：

import { combineReducers } from 'redux'
import ranges from './events'
import ids from './ids'
import params from './params'
import total from './total'

export default resource =>
  combineReducers({
    ids: ids(resource),
    ranges: ranges(resource),
    params: params(resource)
  })

events.js：

import { GET_EVENTS_SUCCESS } from '@/state/types/data'

export default resource => (previousState = {}, { type, payload, requestPayload, meta }) => {
  if (!meta || meta.resource !== resource) {
    return previousState
  }
  switch (type) {
    case GET_EVENTS_SUCCESS:
      const newState = Object.assign({}, previousState)
      payload.data[resource].forEach(record => {
        // ISO 8601 time interval string -
        // http://en.wikipedia.org/wiki/ISO_8601#Time_intervals
        const range = record.start + '/' + record.end
        if (newState[record.id]) {
          if (!newState[record.id].includes(range)) {
            // Don't mutate previous state, object assign is only a shallow copy
            // Create new array with added id
            newState[record.id] = [...newState[record.id], range]
          }
        } else {
          newState[record.id] = [range]
        }
      })
      return newState
    default:
      return previousState
  }
}

还有一个数据缩减器，但由于通用实现被重新用于常见列表响应，因此它在父缩减器中链接。更新事件数据并删除开始/结束属性，因为它由范围（ISO 8601 time interval string）组成。这可以稍后由moment.range使用或由＆＃39; /＆＃39;分割。获取开始/结束数据。我选择了一系列范围字符串来简化现有范围的检查，因为它们可能会变大。我认为原始字符串比较（indexOf或es6包含）在这种情况下比在复杂结构上循环更快。

data.js（精简版）：

import { END } from '@/state/types/fetch'
import { GET_EVENTS } from '@/state/types/data'

const cacheDuration = 10 * 60 * 1000 // ten minutes
const addRecords = (newRecords = [], oldRecords, isEvent) => {
  // prepare new records and timestamp them
  const newRecordsById = newRecords.reduce((prev, record) => {
    if (isEvent) {
      const { start, end, ...rest } = record
      prev[record.id] = rest
    } else {
      prev[record.id] = record
    }
    return prev
  }, {})
  const now = new Date()
  const newRecordsFetchedAt = newRecords.reduce((prev, record) => {
    prev[record.id] = now
    return prev
  }, {})
  // remove outdated old records
  const latestValidDate = new Date()
  latestValidDate.setTime(latestValidDate.getTime() - cacheDuration)
  const oldValidRecordIds = oldRecords.fetchedAt
    ? Object.keys(oldRecords.fetchedAt).filter(id => oldRecords.fetchedAt[id] > latestValidDate)
    : []
  const oldValidRecords = oldValidRecordIds.reduce((prev, id) => {
    prev[id] = oldRecords[id]
    return prev
  }, {})
  const oldValidRecordsFetchedAt = oldValidRecordIds.reduce((prev, id) => {
    prev[id] = oldRecords.fetchedAt[id]
    return prev
  }, {})
  // combine old records and new records
  const records = {
    ...oldValidRecords,
    ...newRecordsById
  }
  Object.defineProperty(records, 'fetchedAt', {
    value: {
      ...oldValidRecordsFetchedAt,
      ...newRecordsFetchedAt
    }
  }) // non enumerable by default
  return records
}

const initialState = {}
Object.defineProperty(initialState, 'fetchedAt', { value: {} }) // non enumerable by default

export default resource => (previousState = initialState, { payload, meta }) => {
  if (!meta || meta.resource !== resource) {
    return previousState
  }
  if (!meta.fetchResponse || meta.fetchStatus !== END) {
    return previousState
  }
  switch (meta.fetchResponse) {
    case GET_EVENTS:
      return addRecords(payload.data[resource], previousState, true)
    default:
      return previousState
  }
}

这可以由具有事件选择器的日历组件使用：

const convertDateTimeToDate = (datetime, timeZoneName) => {
  const m = moment.tz(datetime, timeZoneName)
  return new Date(m.year(), m.month(), m.date(), m.hour(), m.minute(), 0)
}

const compileEvents = (state, filter) => {
  const eventsRanges = state.events.list.ranges
  const events = []
  state.events.list.ids.forEach(id => {
    if (eventsRanges[id]) {
      eventsRanges[id].forEach(range => {
        const [start, end] = range.split('/').map(d => convertDateTimeToDate(d))
        // You can add an conditional push, filtered by start/end limits
        events.push(
          Object.assign({}, state.events.data[id], {
            start: start,
            end: end
          })
        )
      })
    }
  })
  return events
}

以下是redux dev工具中数据结构的外观：

每次提取事件时，都会更新其数据（如果有更改）并添加引用。以下是获取新事件范围后redux diff的屏幕截图：

希望这对某些人有所帮助，我只是补充一点，这仍然没有经过考验，但更能证明一个有效的概念。

[编辑]顺便说一下。我可能会将一些逻辑移到后端，因为没有必要拆分/加入/删除属性。

Redux和Calendar重复事件

4 个答案: