Class domain layer

[GurovDmitriy]

Summary

Can I do something like this more efficiently, the goal is to separate the business layer from the ui tool?

clean architecture

• types
• domain
• framework
  • entities
  • features
  • ...

Page

Robert Martin

Details

"use client"
import { useState } from "react"

// types
// from scr/types
interface ICounter {
  value: number
  up(): void
}

// domain
// from scr/domain
class Counter implements ICounter {
  public value: number

  constructor() {
    this.value = 0
  }

  up() {
    this.value += 1
  }
}

// framework
// from scr/framework/entities
interface ICounterModel {
  counter: Omit<ICounter, "up">
  update: ICounter["up"]
}

function useCounterModel(): ICounterModel {
  const [counterInstance] = useState(() => new Counter())
  const [counter, setCounter] = useState({ ...counterInstance })

  function update() {
    counterInstance.up()

    setCounter({ ...counterInstance })
  }

  return {
    counter,
    update,
  }
}

[pwbriggs]

Hey there @GurovDmitriy! 👋

I'm not sure I understand the issue here. Is this a bug in React?

Unfortunately, this bug tracker is for reproducible issues in React itself, and requests for help with your code often go unanswered. Check out the community page for a list of better places to get help.

If this is a bug in the React library itself, please provide a minimal, reproducible example demonstrating this issue, and why you think it's a bug in React.

Thanks! ❤️

[GurovDmitriy]

Hey there @pwbriggs!

I thought that if it is possible to indicate in the documentation that it is possible to separate layers in a similar way, which is typical for large systems, then it is worth making a footnote or an example in the documentation, so much time has passed, large works have been written to build systems and architectures, but frameworks do not give such a recommendation or examples, I think more people will be attracted to the product (framework) if it becomes more accessible, and it becomes accessible if there is an opportunity to adapt it to a rational approach to architecture. We clearly state in the documentation that react is a ui layer, but there is no example for implementing this layer...

..Is this a bug in React? - This is a proposal to write an example in the documentation when there is platform-independent code that implements the business level, and how it can be correctly connected to the UI framework.

[pwbriggs]

Thanks for the clarification @GurovDmitriy!

[rickhanlonii]

There are many patterns and ways to structure your code and our goal is not to provide opinions on how to organize your code, so we're not doing to add docs for patterns like this.

[GurovDmitriy]

Thank you very much for your answer