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

Question

@action-land/component

基于Action 的功能组件

Installation

npm i @action-land/component

Usage

import {Nil} from '@action-land/core'
import {COM} from '@action-land/component'

// component is created using the COM constructor function
const component = COM(
  () => ({count: 0}),
  (a, s) => ({...s, count: count + 1}),
  () => Nil(),
  (s: Smitten, m: {count: 0}, p: {color: string}) => 'Hello World' + m.count
)

// component can be transformed using map()
const crazyComponent = component.map(component =>
  COM(
    (...t) => Object.assign({crazy: true}, component.init(...t)),
    component.update,
    component.command,
    component.view
  )
)

API

Component

一个组件由 4 个纯函数组成 —

1. init: Creates the initial state of the component.
2. update: Is a reducer function.
3. command: Is a command function.
4. view: Takes in the state and other params and returns a virtual dom element.
5. Components are framework agnostic.

export interface Component<State, Params, Args extends any[], VNode> {
  init(...t: Args): State
  update<T>(action: Action<T>, state: State): State
  command<T, R>(action: Action<T>, state: State): Action<R>
  view(e: Hoe, m: State, p: Params): VNode
  map<S, P, A, V>(
    t: Component<State, Params, Args, VNode>
  ): Component<S, P, A, V>
}

init()

1. Can take in any number of arguments.
2. Returns the initial version of the State.

function init(...t: any[]): State

update()

1. Its an [update function] that takes in an Action and a State and returns a new State.

function update(action: Action, state: State): State

command()

1. Its an command function that takes in an Action and a State and returns a new Action.

function command(action: Action, state: State): Action

view()

1. Takes in three arguments — Hoe, State and Params.
2. Returns a new virtual dom element — VNode.
3. VNode can be anything implementation from [React], [snabbdom] etc.

function view(e: Hoe, s: State, p: Params): VNode