react-command-manager: 业务中的独立command 管理

独立的业务，看作一个 command，方便复用

项目主页: https://github.com/afeiship/react-command-manager

想法

目前设计的这个，支持返回值，其实就是一个普通的函数。

在命令模式（Command Pattern）中，execute 方法传统上是不包含返回值的。命令模式的主要目的是将请求（或操作）封装成一个对象，以便通过不同的请求、队列、日志来参数化其他对象，以及支持可撤销的操作。因此，execute 方法的主要职责是执行命令所代表的操作，而不是返回操作的结果。

然而，这并不意味着你不能在 execute 方法中添加返回值。是否允许 execute 方法有返回值取决于你的具体需求和设计决策。

安装

yarn add @jswork/react-command-manager

使用

类似于 provider 一样的方式，但实际并不是 provider

特别注意：这个组件强依赖于 nx 所以，这里一定要放在 bootstrap，即初始化 nx 之后运行。

import React from 'react';
import ReactDOM from 'react-dom/client';
import { scanVite } from '@jswork/scan-modules';
import ReactCommandManager from '@jswork/react-command-manager/src/main';

const moduleFiles = import.meta.glob('./shared/commands/**/*.ts', { eager: true });
const modules = scanVite(moduleFiles, { modules: '/commands/', });

import App from './app';
import './index.scss';


function App(){
  return (
    <div>
      <button onClick={() => nx.$exec('posts.create')}>Create</button>
      <button onClick={() => nx.$exec('posts.update', { title: 'new title' })}>Update</button>
      <ReactCommandManager modules={modules} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')!).render(
    <App />
);

定义 Command

import { defineCommand } from '@jswork/react-command-manager';

export default defineCommand({
  methods: {
    init(){
      console.log('init posts will execute at first time');
    },
    create() {
      console.log('create posts');
    },
    update({ title }) {
      console.log('update post', title);
    },
  },
});

使用

function App() {
  return (
    <div className="m-10 p-4 shadow bg-gray-100 text-gray-800 hover:shadow-md transition-all">
      <div className="badge badge-warning absolute right-0 top-0 m-4">
        Build Time: {BUILD_TIME}
      </div>
      <button onClick={() => nx.$exec('user.login')} className="btn btn-primary">User Login</button>
      <div className="y-2">
        <h3>Posts</h3>
        <nav className="x-2">
          <button className="btn btn-sm btn-secondary" onClick={() => nx.$exec('post.create')}>New Post</button>
          <button className="btn btn-sm btn-secondary"
                  onClick={() => nx.$exec('post.update', { title: 'New Title' })}>Update Post
          </button>
        </nav>
      </div>
    </div>
  );
}

export default App;