Дети Redux - Часть 2: Feeble, vdux и hyperapp

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

Вкратце и без каких-либо спойлеров, Feeble здесь для вас, чтобы вы могли использовать его в качестве другого, но более простого типа подхода с неизменяемым состоянием клиента, vdux для предоставления состояний локальных компонентов и управления приложениями, такими как atom и hyperapp, для упрощения процесса разработки, предоставляя такие функции, как Elm. архитектура настолько же функциональна.

Слабый

Библиотека содержит структуру, основанную на сагах React, Redux и Redux. Упрощает реализацию Redux для легкого начала прототипирования чего-либо на основе реализации потока или преобразования / рефакторинга кодовой базы в Feeble.

Еще одна причина использовать Feeble, чтобы поближе познакомиться с некоторыми альтернативными реализациями, основанными на реакции и сокращении. Как и в первой серии этой статьи, вы также легко можете переходить от одного к другому. Он также хорошо работает с React.

Непосредственно перед запуском мы добавляем некоторые зависимости:

import React from 'react'
import ReactDOM from 'react-dom'
import feeble, { connect } from 'feeble'

Создание экземпляра из слабой функции:

const app = feeble()

Создание модели для нашего примера счетчика, упомянутого также в файле readme репозитория:

const counter = feeble.model({
  namespace: 'count',
  state: 0,
})

Вызов ваших действий для объединения с вашими взаимодействиями в пользовательском интерфейсе:

counter.action('increment')
counter.action('decrement')

И, конечно же, добавьте в модель редуктор, чтобы эти изменения произошли:

counter.reducer(on => {
  on(counter.increment, state => state + 1)
  on(counter.decrement, state => state - 1)
})

В конце концов, достаточно привязать вашу модель к вашему приложению:

app.model(counter)

Структурируйте свое дерево представления, открыв новый экземпляр, например под названием «Приложение»:

const App = connect(({ count }) => ({
  count
}))(function({ dispatch, count }) {
  return (
    <div>
      <h2>{ count }</h2>
      <button key="inc" onClick={() => { dispatch(counter.increment()) }}>+</button>
      <button key="dec" onClick={() => { dispatch(counter.decrement()) }}>-</button>
    </div>
  )
})

Теперь мы сопоставляем весь поток данных, привязки и действия с нашим представлением:

const tree = app.mount(<App />)

И визуализируем ваше приложение в DOM:

ReactDOM.render(tree, document.getElementById('app'))

Если вам нужны асинхронные вещи (кто не знает!), Вы можете использовать эффекты, основанные на сагах:

model.effect(function* {
  yield* takeEvery(count.increment, function* ({ payload }) {
    yield call(localStorage.setItem, 'count', payload)
  })
})

Одно из преимуществ использования Feeble - это многоразовые редукторы, подобные приведенным ниже, путем отправки сигналов вашим редукторам прямо на месте:

model.reducer(on => {
  on(post.fetch.request, state => ({
    ...state,
    loading: true,
  }))

  on(post.fetch.success, (state, payload) => ({
    ...state,
    loading: true,
    data: payload,
  }))
})

Здесь также есть приложение для хакерских новостей, построенное на этой прекрасной структуре.

Вдукс

Связь между redux и DOM как «виртуализированная». Создатель библиотеки считает, что состояние должно быть зависящим от компонента, а глобальное состояние должно изменяться только путем применения подхода рендеринга на стороне сервера, подобного следующему:

function * serverRender () {
  const {state, html} = yield vdux(<App />)

  this.body = `<html>
    <head>
      <script src='/vdux.js'></script>
      <script src='/app.js'></script>
      <script>
        vdux(() => <App />, {
          initialState: ${JSON.stringify(state),
          prerendered: true
        })
      </script>
    </head>
    <body>
      ${html}
    </body>
  </html>`
}

Базовый пример счетчика для лучшего понимания подхода говорит нам, что он использует терминологию Redux, такую как редукторы и действия для запуска, чтобы также обновить локальное состояние:

const TinyComponent = component({
  render ({state, actions}) {
    return <div onClick={actions.increment}>Value: {state.value}</div>
  },

  reducer: {
    increment: state => ({
      value: state.value + 1
    })
  }
}

Для создания виртуально сгенерированной модели DOM и управления ею вам нужны только две основные функции библиотеки: компонент и элемент:

import {component, element} from 'vdux'

Затем достаточно вернуть наш крошечный компонент в качестве возвращаемого значения функции vdux:

import vdux from 'vdux/dom'
vdux(() => <TinyComponent />)

Гиперапп

Эта библиотека предоставляет еще одну функциональность «plug & play» для ваших вечнозеленых приложений, в которых вы надеетесь воплотить в жизнь некоторые инновационные идеи! Он уже такой крошечный, как 1 КБ, и минимизирован, как указано в файле readme репозитория:

HyperApp родился из попытки делать больше с меньшими затратами.

HyperApp полностью вдохновлен архитектурой Elm и простотой работы с парадигмой функционального программирования, как это упоминается в том же файле readme.

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

app({
  state: {
    count: 0
  },
  view: (state, actions) =>
    <main>
      <h1>{state.count}</h1>
      <button onclick={actions.down}>ー</button>
      <button onclick={actions.up}>＋</button>
    </main>,
  actions: {
    down: state => ({ count: state.count - 1 }),
    up: state => ({ count: state.count + 1 })
  }
})

Вы можете объявлять «тупые» компоненты и использовать их в любой структуре приложения:

const DumbComponent = ({ name, title, url }) =>
  <h1>
    <a href={url}>{name}, {title}</a>
  </h1>

Каждый созданный виртуальный узел состоит из трех основных частей: тега, данных, дочерних элементов:

{
  tag: "div",
  data: {
    id: "some"
  },
  children: [{
    tag: "p",
    data: null,
    children: ["Some paragraph."]
  }]
}

И это дает следующее. Вы также можете использовать функцию h, чтобы воспроизвести виртуальную модель DOM, как то же самое:

<div id="some">
  <p>Some paragraph.</p>
</div>

Итак, как насчет методов жизненного цикла компонентов? Все они предоставляются библиотекой для обработки всех шагов компонента: загрузка для начального момента рендеринга приложения, действие для проверки событий непосредственно перед вызовом, разрешение для проверки результатов действий, обновление для отслеживания и выполнения действий во время происходящих изменений и рендеринга для переопределения функции просмотра перед ее вызовом.

Вот и площадка для гиперпарапа.

Надеюсь, вам понравилась статья! Спасибо за чтение и до встречи в следующей серии.

Примечание. Если вам понравился этот пост, ❤ поделитесь им в Твиттере или сделайте что-нибудь! :)

Дети Redux - Часть 2: Feeble, vdux и hyperapp