Нажмите здесь, чтобы опубликовать эту статью в LinkedIn »
В React отсутствует основная функция, позволяющая легко подключить компоненты пользовательского интерфейса к некоторому бэкэнду, например, к базе данных (на стороне сервера) или службам REST (на стороне клиента или на стороне сервера). Когда мы начали работать над компонентами пользовательского интерфейса в Hextrakt, мы рассматривали различные решения этой проблемы. Не обошлось и без Redux, цель которого - управлять состоянием пользовательского интерфейса и реагировать на действия пользователя. Redux очень полезен на стороне клиента, но не очень помогает при рендеринге на стороне сервера, где начальное состояние неизменяемо.
На стороне сервера мы хотели иметь возможность:
1- для рендеринга полного дерева DOM с его тегами и их начальными значениями (атрибутами и содержимым), полученными из бэкэнда базы данных;
2- внедрить переменную javascript в DOM, чтобы предоставить начальное состояние компонентам React или хранилищу Redux при рендеринге на стороне клиента.
Поэтому мы решили создать простой (но полный) фреймворк под названием react-backend, который позволяет:
1- объявить, какие данные необходимы в каком пути приложения. Например, чтобы сообщить, что при переходе к / user необходимо «getUserInfo», мы используем как React Route, так и один компонент NeedsData:
<Route path='/user' render={() => ( <NeedsData needs="getUserInfo"/> )}/> </Route>
2- предоставить все исправленные данные (или ошибки) для презентационных компонентов. За это отвечает компонент WithData.
<WithData dataProvider={dataProvider}> <UserForm/> </WithData>
И компонент пользовательского интерфейса UserForm можно написать так
class _UserForm extends React.Component { render() { const {dataProvider} = this.props if (!dataProvider.hasErrors()) { const userInfo = dataProvider.getData("getUserInfo") // add here your rendering logic } else if (dataProvider.getError("getUserInfo")) { // show specific error } } } const UserForm = withDataProvider(_UserForm)
После нескольких месяцев работы и увидев, что он работает хорошо, мы решили поделиться им и сделать его общедоступным, чтобы сообщество могло дать обратную связь и помочь улучшить его.
Дополнительная информация на https://github.com/Hextrakt/react-backend