Как отделить компонент от его собственных потребностей извлечения данных

reactjs redux flux

321 просмотра

2 ответа

Когда компонент требует выборки определенного набора данных перед рендерингом, я обычно делаю что-то вроде этого:

class Comp extends Component {
  componentWillMount() {
    this.props.requestData() // triggeres in action in the wrapper
  }
  render() {
    const { data } = this.props.
    return (
       <div>
         {/* do something with data */}
       </div>
    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Comp)

Теперь у меня есть два React SPA, в которых я хочу использовать этот компонент. В одном приложении необходимые данные должны быть извлечены до монтирования компонента, в другом данные уже существуют. Поэтому мне было интересно, есть ли лучшая практика в отношении проблемы извлечения данных, которая является обязательным условием для компонента. Есть ли способ для обертки слушать Compжизненный цикл? Должен ли я просто переименовать requestDataв onComponentWillMountи слушать , что для действия запуска?

В идеале компонент не должен беспокоиться о том, когда или когда его нужно получить.

Автор: MoeSattler Источник Размещён: 08.11.2019 11:10

Ответы (2)


1 плюс

Решение

Вы можете создать HoC (Компонент высшего порядка), чтобы обернуть ваш ванильный Compкомпонент и получить данные о onComponentWillMount(и о onComponentWillReceiveProps). Поскольку вы используете избыточность, я представляю, что ваш requestData()обратный вызов создает действие избыточности, которое отправляет данные в глобальное хранилище. В качестве альтернативы, если данные являются локальными для этого компонента, вы можете сохранить их в состоянии HoC.

Автор: Manolo Santos Размещён: 20.08.2016 02:42

0 плюса

Вы можете переместить вызов создателя действия requestData в событие React Router «onEnter» в своем определении маршрутов. Таким образом, компонент отделяется от создателя действия извлечения.

Автор: Matteo Frana Размещён: 20.08.2016 10:27
Вопросы из категории :
32x32