@ effector/ reflect (帮助)

QQ 附加效应存储器,用于不带钩子的反应组件.

安装

npm install @effector/reflect
# or
pnpm add @effector/reflect

开始 | API 文档

动机

反省何为?

是API设计,使用经典的HOC类似图案,允许您以高效而可调和的方式用Effector来写回组件.

import { reflect, variant } from '@effector/reflect';

export function UserForm() {
  return (
    <FormCard>
      <Name />
      <LastName />
      <SubmitButton />
    </FormCard>
  );
}

const Name = reflect({
  view: Input,
  bind: {
    value: model.$name,
    onChange: model.nameChanged,
  },
});

const LastName = reflect({
  view: Input,
  bind: {
    value: model.$lastName,
    onChange: model.lastNameChanged,
  },
});

const SubmitButton = reflect({
  view: Button,
  bind: {
    type: 'submit', // plain values are allowed too!
    disabled: model.$formValid.map((valid) => !valid),
    onClick: model.formSubmitted,
  },
});

在这里,我们把这个部件分割成小部分, 这些部件是用一种方便的方式创建的 reflect 运算符,这是一个非常简单的描述 props -> values 映射,便于阅读和修改.

与 @effector/reflect我们 $formValid 更新只会使提交按钮被重新发送,对于我们的所有其他部分来说 <UserForm /> 一定会有 零 反应工作.

学习更多,请阅读 充分激励文章。 。 。 .

释放过程

1. 看看这个 释放草稿。 。 。 .
2. 所有公关应当有正确的标签和有用的标题. 你们可以 在此审查可用的标签。 。 。 .
3. 更新 PR 和标题的标签, 下次 手动运行发行起草器动作 重新生成释放草稿.
4. 审查新版本并按"Publish"
5. 如果需要检查“ 此发行的创意讨论”