Где преобразовать состояние Redux для использования в пользовательском интерфейсе - PullRequest
Новая
       16

Где преобразовать состояние Redux для использования в пользовательском интерфейсе

0 голосов
/ 21 февраля 2019

У меня есть список «Событий»: 

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

Я извлекаю эти События в componentDidUpdate, а затем они передаются моему компоненту в виде подпорки.- getEvents.

Я хочу отобразить их в календарном реагировании, который хочет иметь их в этом формате - 

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

Где я могу преобразовать их из моего объекта в реагирующий большойобъект календаря?

Похоже, это должно происходить в компоненте, поэтому, если я переключусь на другую библиотеку календаря, мой избыточный код останется неизменным.

Существует ли стандартный шаблон для этого?Должен ли я просто сделать это непосредственно в моем методе рендеринга? 

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

Или есть лучший способ сделать это?

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Не могу найти это в React docs сейчас, но с точки зрения производительности - лучше сохранить метод render как можно более простым и не перегружать его дополнительной логикой.Учтите, что ваш компонент будет перерисован из-за смены других реквизитов - каждый раз он будет пересчитывать bigCalEvents

. Поэтому лучше передавать данные компоненту в формате, в котором они ожидают данные.

Я бы порекомендовал вам сделать эту обработку в функции mapStateToProps.Также, если вы используете библиотеку reselect - вы можете запомнить результаты, чтобы избежать повторного отображения.

0 голосов
/ 21 февраля 2019

Вместо того, чтобы преобразовывать их в компонент, вы должны написать селектор и преобразовать эти события в этом селекторе.В любое время, когда вы захотите позже перейти на другую библиотеку, вам просто нужно изменить логику в одном селекторе, а не менять ее в каждом компоненте 

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