时间戳

首页 > 解决方案 > 在哪里转换 Redux 状态以在 UI 中使用

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

问题描述

我有一个“事件”列表：

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

我在 componentDidUpdate 中获取这些事件，然后将它们作为道具形式传递给我的组件 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>);
 ....
}

还是有更好的方法来做到这一点？

标签： reactjsdesign-patternsreduxreact-redux

解决方案

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

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;
}

推荐阅读