How to sync a JS class to a component's state in React?-CodePudding

I am completing a technical challenge and came across a scenario I never had to deal with before.

I am asked to code up a shopping cart that has a UI that represents basic checkout data like order total, current items in cart, etc.

One of the requirements states I need to implement a Checkout class that can be instantiated:

const checkout = new Checkout();

And I should be able to obtain basic info from it like:

const total = checkout.total();

And add items to the cart through it:

checkout.add(product.id);

What makes this a tricky thing to solve is that I can't think of a clean "DRY" way of implementing it into the UI. This is mainly because any updates in the checkout class will not trigger any re-renders since it's not part of the state. I would usually use state variables for this.

I tried binding state variables to parameters in the checkout class like:

const [total, setTotal] = useState();
useEffect(()=>{
   setTotal(checkout.total)
}, [checkout.total])

But checkout.total is only the reference to the method, so it never changes so I do not get the binding I want.

Trying out other stuff I managed to put together a "solution" but I question whether it is a good pattern.

I basically pass a callback to the checkout class which is called whenever the cart is updated. The callback is a state variable's setter, so:

const [cart, setCart] = useState<string[]>(checkout.cart);
checkout.callback = setCart;

Then inside the add method:

add(productId) {
   // Some code...
   this.callback([...this.cart]);
}

What this grants is that the cart state variable is updated whenever the checkout class has changes in its parameters. So it fires a rerender on the Cart component and all of its children that have props being passed down. Therefore I get a synced UI.

The thing is I kind of don't need the cart variable other than for forcing re-renders. I can get the cart info directly from the checkout class which is what I do. But for it to be reflected in the UI I need some state variable to be updated. It could even be a counter, I only went for cart instead of a counter to make it more coherent I guess.

Am I overcomplicating things here? Is there a pattern I am missing that is used for this scenarios? How does one usually interact with an instantiated class and ensures the UI is somehow updated from changes to the class?

CodePudding user response：

mixing of patterns

Using OOP instances with methods that mutate internal state will prevent observation of a state change -

const a = new Checkout()
const b = a                     // b is *same* state
console.log(a.count)            // 0
a.add(item)
console.log(a.count)            // 1
console.log(a == b)             // true
console.log(a.count == b.count) // true

React is a functional-oriented pattern and uses complimentary ideas like immutability. Immutable object methods will create new data instead of mutating existing state -

const a = new Checkout() 
const b = a.add(item)           // b is *new* state
console.log(a.count)            // 0
console.log(b.count)            // 1
console.log(a == b)             // false
console.log(a.count == b.count) // false

In this way, a == b is false which effectively sends the signal to redraw this component. So we need a immutable Checkout class, where methods return new state instead of mutating existing state -

// Checkout.js

class Checkout {
  constructor(items = []) {
    this.items = items
  }
  add(item) {
    return new Checkout([...this.items, item]) // new state, no mutation
  }
  get count() {
    return this.items.length // computed state, no mutation
  }
  get total() {
    return this.items.reduce((t, i) => t   i.price, 0) // computed, no mutation
  }
}

export default Checkout

demo app

Let's make a quick app. You can click the