State structure and organization when using signals

[rawrmonstar]

Has anyone come up with strategies / patterns to help manage your state when using signals? Libraries like Redux and Mobx-State-Tree offer strong recommendations about structure which IMO ultimately leads to less spaghetti state all over the place.

I still would use signals though, I just haven't seen any pattern that provides an organizational strategy when it comes to managing state.

Signals right now feel to me like alternatives to useState instead of a larger state management library.

[rschristian]

Signals right now feel to me like alternatives to useState instead of a larger state management library.

That's essentially the goal, yes. Signals are a new state primitive (well, new to preact/react) and as such are best compared to the existing state primitives like useState. Redux and MST are opinionated tools that build upon existing primitives, hence why they come with such strong suggestions around patterns. They work on a different layer to signals.

Classes (both for components or just data models) work really well with signals and quite a few of us use them very heavily throughout our apps. Can then stick the class instance into a context provider to access it from anywhere within your app.

class DataModel {
    foo = signal('foo');
    bar = signal('bar');
    baz = computed(foo.value + bar.value);
}

const Model = createContext();

function App() {
    return (
        <Model.Provider value={new DataModel()}>
            {...}
        </Model.Provider>
    );
}