🌋 WebIDE 的开发记录其二（核心架构）

// todoModel.ts
import {NovusBaseModel, novus} from './novus'
const todoDto = {
  sync: async newTodo => {
    await new Promise(r => setTimeout(r, 1000))
  },
}
export enum TodoStatus {
  Normal,
  Completed,
  Deleted,
}
export type TTodo = {
  status: TodoStatus
  tags: string[]
  content: string
}
export interface ITodoState {
  loading: boolean
  groups: string[]
  list: TTodo[]
  filters: {
    tags: string[]
    statuses: TodoStatus[]
  }
}
// 使用继承类的形式限制属性和方法
class TodoModel extends NovusBaseModel<ITodoState> {
  namespace = 'todoModel'
  constructor() {
    super()
    this.state = {
      loading: false,
      groups: [],
      list: [],
      filters: {
        tags: [],
        statuses: [],
      },
    }
  }
  // 自定义状态更新函数
  syncData = async list => {
    this.setState({loading: true})
    await todoDto.sync(list)
    this.setState({list, loading: false})
  }
  // actions 集合，可以调用异步函数，约定为修改状态的逻辑，提供数据操作方法
  actions = {
    create: async (content: string, tags: string[] = []) => {
      const newTodo = {
        tags,
        content,
        status: TodoStatus.Normal,
      }
      await this.syncData([newTodo, ...this.state.list])
    },
    update: async (index: number, todo: TTodo) => {
      const newTodo = {
        ...this.state.list[index],
        ...todo,
      }
      await this.syncData([
        ...this.state.list.slice(0, index - 1),
        newTodo,
        ...this.state.list.slice(index + 1),
      ])
    },
    delete: async (index: number) => {
      await this.syncData([...this.state.list.slice(0, index), ...this.state.list.slice(index + 1)])
    },
  }
}
export const model = new TodoModel()
novus.bindModel(model)

// TodoExample.tsx
import React, {useCallback} from 'react'
import {useNovus} from './novus'
import {model as todoModel, TTodo} from './todoModel'
export const ExampleTodoExample = props => {
  let [list, loading] = useNovus<[TTodo[], boolean]>(
    models => {
      return [models.todoModel.state.list, models.todoModel.state.loading]
    },
    ['todoModel'],
  )
  const deleter = useCallback(async (index: number) => {
    await todoModel.actions.delete(index)
  }, [])
  const adder = useCallback(async () => {
    await todoModel.actions.create(new Date().toTimeString())
  }, [])
  return (
    <div>
      <button disabled={loading} onClick={adder}>
        {loading ? 'loading' : 'ADD'}
      </button>
      <table>
        <tbody>
          {list.map((todo, index) => {
            return (
              <tr key={todo.content}>
                <td>{todo.content}</td>
                <td>
                  <button onClick={deleter.bind(null, index)}>关闭</button>
                </td>
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
  )
}