Behavior of Valtio when adding new objects into state

[CharlieDigital]

Consider a state like so:

class AppState
{
    public employees: Employee[] = [];
}

export const appState = proxy(new AppState());

I can add a new employee to the state and if I retrieve and mutate the employee, I get the expected behavior:

import { appState } from 'store/AppState'
appState.employees.push(new Employee());
const employee = appState.employees[appState.employees.length - 1];
employee.compensation = '$100,000';
// UI reacts to this change

On the other hand, if I create the employee, add it to the array and adjust the compensation, it does not work as I initially expected:

import { appState } from 'store/AppState'
const employee = new Employee();
appState.employees.push(employee);
employee.compensation = '$100,000'; // Some subsequent update to the object property
// UI doesn't react to this change

I think I understand the reason why because the instance retrieved from appState is proxied.

So my followup question is what is whether there is a better pattern in this case? Could I make the employee object reactive before pushing it into the state?

Perhaps the better pattern here is to treat the appState like a factory and:

const employee = appState.CreateEmployee();
employee.compensation = '$100,000';

[dai-shi]

Thanks for trying valtio!

I think I understand the reason why because the instance retrieved from appState is proxied.

Exactly.

So my followup question is what is whether there is a better pattern in this case?

I would do this:

import { appState } from 'store/AppState'
const employee = proxy(new Employee());
appState.employees.push(employee);
employee.compensation = '$100,000';

So, valtio primitives are for function style.

Perhaps the better pattern here is to treat the appState like a factory

I think you can do it on your end, creating such a factory function.

[CharlieDigital]

Perfect; didn't realize I could directly proxy the object.

Just what I needed.

[dai-shi]

👍

FYI: https://github.com/pmndrs/valtio/wiki/How-to-split-and-compose-states

[CharlieDigital]

I had read that, but 1 and 1 did not click for me!

I've been playing around with it and wrote an article: https://chrlschn.medium.com/magical-experiments-in-react-state-with-valtio-2b40cf159120

Really, really digging this project.