@action-land/smitten 中文文档教程

Question

@action-land/smitten

smitten 是一个动作发射器库。 它有助于以高效和优雅的方式从虚拟 dom 组件发出操作。

Table of Contents

• Installation
• Usage
• Action
• Example
• API

Installation

通过 npm：

$ npm install @action-land/smitten --save

Usage

import * as smitten from '@action-land/smitten'

// Logs the `Actions`
const actionListener = action => {
  console.log(action)
}

// Creating a new instance
const emitter = smitten.create(actionListener)

// Sample Usage
const component = (emitter) => (
  <div>
    <button onClick={emitter.of('hello').emit}>Hello</button>
    <button onClick={emitter.of('bye').emit}>Bye</button>
  <div>
)

// vNode being returned from the component
const vNode = component(emitter)

在点击按钮时，actionListener 记录以下 Action —

// Hello
{type: 'hello', value: [ClickEvent]}

// Bye
{type: 'bye', value: [ClickEvent]}

在这种情况下，value 是实际的点击事件。

Action

Smitten 将 DOM 事件转换为 Action。 Action 有两个属性——

• type : Its a string|number identifier which depicts the originator of event. For example — if an event is fired from the side navigation, the corresponding Action could have a type as SIDE_NAV.
• value: Value is the payload that needs to be transmitted via the Action. In most cases it would be the DOM event. In some cases the value it self could be an Action. This is especially useful when the nesting of components is really deep and one would like to namespace actions based on the hierarchy of components.

API

smitten.create(actionListener)

这是用于创建动作发射器的构造函数。 它接收一个侦听器并返回一个 Smitten 实例。

用法

import * as smitten from '@action-land/smitten'

const actionListener = event => {
  // do something with that event
}

const emitter = smitten.create(actionListener) // returns a Smitten

emitter.of(type)

它接受类型为string|number 的type 并返回Smitten 的新实例。 例如：

import * as smitten from '@action-land/smitten'

const h0 = smitten.create(listener)
const h1 = h0
  .of('A')
  .of('B')
  .of('C')

emitter.emit(value)

它在所有 Smitten 实例上都可用。 它接受任何 value 并根据 type 调度 action。