@42px/effector-extra 中文文档教程

Question

Effector extra

有用的效应器实用程序。

Installation

npm install @42px/effector-extra

Utils

attachWrapper

通常您需要使用包装的参数、结果或错误创建衍生效果：

import { attachWrapper } from '@42px/effector-extra'
import { requestFx, Res } from '../request'

type LoginParams = {
  username: string
  password: string
}

type LoginResult = {
  token: string
}

const loginReqFx = attachWrapper({
    effect: requestFx,
    mapParams: (params: LoginParams) => ({
        method: "POST",
        body: params,
    }),
    mapResult: ({ result }): Res<LoginResult> => result.data,
    mapError: ({ error }) => {
        if (error.code === 404) {
          const err = new Error()
          err.name = "InvalidCredentials"
          return err
        }
        return error
    },
})

createService

const domain = createDomain()
// real request effect
const requestFx = domain.effect<ReqParams, Response, Error>()

const myService = createService({
    domain: createDomain(),
    effect: requestFx,
})

// some method
const getNewsFx = myService.createMethod({
    mapParams: (newsId: number) => ({
        url: `/news/${newsId}`,
    }),
    mapResult: ({ result }) => result.data,
})

Event batcher

当您有许多事件的不一致流时，此实用程序很有用。 如果事件序列的触发速度快于定义的延迟，它会在数组中批量处理事件有效负载。 否则事件立即触发

import { batchEvents } from '@42px/effector-extra'
import { matrixDomain } from './domain'

export const roomMessage = matrixDomain.event<MessageEvent>()
export const roomMessageBatch = batchEvents(roomMessage, 500)

mockEffects/mockStores

使用 fork 时模拟效果的类型安全助手（对测试有用）：

const mockCartStorage = () => {
  let cartStorage: CartItem[] = [] 

  return mockEffects()
    .set(writeCartFx, (cart) => {
      cartStorage = cart
    })
    .set(readCartFx, () => cartStorage)
}

let scope: Scope


test('add to cart', async () => {
  scope = fork(root, {
    handlers: mockCartStorage(),
  })
})