reactjs - 在哪里转换 Redux 状态以在 UI 中使用

Question

我有一个“事件”列表:

{
 id: 1,
 description: "Did something",
 date: <date>, 
 eventTypeId: 1
}

我在 componentDidUpdate 中获取这些事件，然后将它们作为 prop form redux connect mapStateToProps 传递到我的组件 - 它们来自“选择器” - getEvents。

我想将它们显示在react-big-calendar上，它希望它们采用这种格式 -

Event {
  title: string,
  start: Date,
  end: Date,
  allDay?: boolean
  resource?: any,
}

在哪里将它们从我的对象转换为react-big-calendar对象？

看来这必须发生在组件中，所以如果我切换到另一个日历库，我的 redux 代码将保持不变。

是否有执行此操作的标准模式？我应该直接在渲染方法中执行此操作吗？

render() {
 let bigCalEvents = this.props.events.map(e => <big cal event>);
 ....
}

或者有更好的方法吗？

Answer 1

您应该编写一个选择器并在该选择器中转换这些事件，而不是在组件中转换它们。以后任何时候您想要更改为不同的库，您只需要更改一个选择器中的逻辑，而不必在每个组件中更改它

const mapStateToProps(state, props) {
    const events = getEvents(state, props);
    return {
       events
    }
}

...

const getEvents = (state, props) => { // this can be a reselect selector as well
      // transform logic here
      return events;
}