Перспективная интерфейсная структура потока данных — dob

Большинство наших внутренних продуктов широко используютсяdobУправляйте внешним потоком данных, который кратко описан ниже.

dob — это инструмент отслеживания зависимостей данных, реализованный через прокси.dob-reactОбъединить с реакцией.

Основная идея доба во многом заимствованаmobx, но было сделано много оптимизаций с точки зрения принципов реализации, простоты использования и средств отладки.

характерная черта

• ✅ Поддержка
• ❌ Не поддерживается
• 📦 Экологическая поддержка
• 🤷 Не полностью поддерживается

Функция	redux	mobx	dob
асинхронный	📦redux-thunkЖдать	✅	✅
прослеживаемый	✅	📦mst	✅
фрактал	🤷replaceReducer	✅	✅
сокращение кода	📦dvaЖдать	✅	✅
функциональный	✅	🤷	🤷
объектно-ориентированный	🤷	✅	✅
Поддержка машинописного текста	🤷	✅	✅
инструменты отладки	✅	✅	✅
Действие инструмента отладки и двусторонняя привязка пользовательского интерфейса	❌	🤷	✅
строгий режим		✅	✅
Поддерживает такие типы, как нативная карта		❌	✅
наблюдаемая естественность синтаксиса		❌	✅
нормализация магазина	✅	🤷	✅

Начните с отслеживания зависимостей

Сам dob реализует только функцию отслеживания зависимостей, и его возможности очень просты, как показано на следующей диаграмме + код:

import { observable, observe } from "dob"

const obj = observable({ a: 1, b: 1 })

observe(() => {
    console.log(obj.a)
})

Описание в одном предложении:observableсгенерированный объект, вobserveИспользуется в функции обратного вызова, когда объект изменяется, функция обратного вызова будет выполняться повторно.

Сочетание элегантности и реагирования

Затем используйте эту функцию, рамка будет наблюдать заменить функцию React Render, она становится следующей диаграммой:

import { observable, observe } from "dob"
import { Provider, Connect } from 'dob-react'

const obj = observable({ a: 1 })

@Connect
class App extends React.Component {
    render() {
        return (
            <span onClick={() => { this.props.store.a = 2 }}>
                {this.props.store.a}
            </span>
        )
    }
}

ReactDOM.render(
    <Provider store={obj}> <App/> </Provider>
, dom)

это точноdob-reactРабота, выполненная .

Вышеуказанная комбинация слишком условна, что не способствует сопровождению проекта.Настоящий dob-react ограничивает использование dob.

глобальный поток данных

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

Так как магазин агрегации вводится в реакцию, это необходимо только.Provider @ConnectВот и все, поэтому, организуя отношения между хранилищем и действием, организуется вся структура приложения.

Так как же организовать отношения между действием, сохранением и реакцией? Для глобального потока данных dob предоставляет зрелый шаблон: внедрение зависимостей. Ниже приведеныремонтопригодность хороший образец:

import { Action, observable, combineStores, inject } from 'dob'
import { Provider, Connect } from 'dob-react'

@observable
export class UserStore {
    name = 'bob'
}

export class UserAction {
    @inject(UserStore) private UserStore: UserStore;

    @Action setName () {
        this.store.name = 'lucy'
    }
}

@Connect
class App extends React.Component {
    render() {
        return (
            <span onClick={this.props.UserAction.setName}>
                {this.props.UserStore.name}
            </span>
        )
    }
}

ReactDOM.render(
    <Provider {
        ...combineStores({
            UserStore,
            UserAction
        })
    }>
        <App />
    </Provider>
, dom)

Описание одного предложения: черезcombineStoresСовокупный магазин и действие, магазин черезinjectВнедренный в изменяемое действие компонент реакции проходит@ConnectАвтоматически внедрять в совокупное хранилище.

локальный поток данных

Данные, не зависящие от глобального состояния, могут обрабатываться как локальный поток данных.

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

PS: Дополнительные сведения об использовании функции Connect см. в документации:dob-react #Connect

Структура показана на следующем рисунке:

import { Action, observable, combineStores, inject } from 'dob'
import { Provider, Connect } from 'dob-react'

@observable
export class UserStore {
    name = 'bob'
}

export class UserAction {
    @inject(UserStore) private UserStore: UserStore;

    @Action setName () {
        this.store.name = 'lucy'
    }
}

@Connect(combineStores(UserStore, UserAction))
class App extends React.Component {
    render() {
        return (
            <span onClick={this.props.UserAction.setName}>
                {this.props.UserStore.name}
            </span>
        )
    }
}

PS: Локальный поток данных можно заменитьsetStateУправляет состоянием самого компонента, и каждый раз, когда компонент создается, он создает связанный с ним локальный поток данных. Если вы не хотите использовать setState, предоставленный реакцией, вместо этого вы можете использовать локальный поток данных.

Асинхронность и побочные эффекты

В редуксе код побочного эффекта нужно отделить от редуктора, но добу это не нужно, мы можем написать действие так:

@Action async getUserInfo() {
    this.UserStore.loading = true
    this.UserStore.currentUser = await fetchUser()
    this.UserStore.loading = false

    try {
        this.UserStore.articles = await fetchArticle()
    } catch(error) {
        // 静默失败
    }
}

Devtools

с помощьюdob-react-devtoolsВключите режим отладки, чтобы добиться чего-то вродеredux-devtoolsэффект, однако инструмент отладки имеетДвусторонняя визуальная привязка действий и пользовательского интерфейсафункции и др.:

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

Предположим, что теперь требуется список статей, мы создаемArticleStoreа такжеArticleAction,ArticleActionПредоставляет базовые методы, такие как addArticle, removeArticle и changeArticleTitle.

Теперь включаем функцию отладки и получаем эффект следующего gif-изображения:

dob-react-devtools в основном предоставляет визуальный интерфейс для отображения списка триггеров каждого действия. Перемещение мыши к каждому действию выделяет элемент пользовательского интерфейса, соответствующий средству визуализации. Когда элемент пользовательского интерфейса визуализируется, панель инструментов в верхнем левом углу также перечисляет элементы пользовательского интерфейса, связанные с этим элементом пользовательского интерфейса Список связанных действий.