jeudi 21 février 2019

Where to transform Redux state for use in UI

I have a list of "Events":

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

I fetch these Events in componentDidUpdate and then they are passed to my component as a prop form redux connect mapStateToProps - they come from a "selector" - getEvents.

I want to display them on react-big-calendar which wants them in this format -

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

Where do I transform them from my object to the react-big-calendar object?

It seems like this must occur in the component, so if I switch to another calendar libary, my redux code would remain unchanged.

Is there a standard pattern for doing this? Should I just do this directly in my render method?

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

Or is there a better way to do this?

Aucun commentaire:

Enregistrer un commentaire