Нажмите здесь, чтобы опубликовать эту статью в 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