SolidJS•10mo ago

Nicest way of having computed properties in a store?

I'm trying to model my store in a concise way, I want to have some base properties, and some computed properties, I think the cleanest way is to use getter/setters but currently they are not reactive as I'm clearly doing something wrong. This is what I have currently:

interface LocalState {
  currentOperatorId: string;
  currentOperator?: Operator;
  operators: Operator[];
  nodes: Node[];
}

const [localState, setLocalState] = createStore<LocalState>({
  currentOperatorId: "",
  // Inline getter, not currently reactive.
  get currentOperator(): Operator | undefined {
    return this.operators.find((op) => op.id === this.currentOperatorId);
  },
  nodes: [],
  operators: [],
});

// External setter method, more code
const setCurrentOperator = (operatorId: string) =>
  setLocalState("currentOperatorId", operatorId);

interface LocalState {
  currentOperatorId: string;
  currentOperator?: Operator;
  operators: Operator[];
  nodes: Node[];
}

const [localState, setLocalState] = createStore<LocalState>({
  currentOperatorId: "",
  // Inline getter, not currently reactive.
  get currentOperator(): Operator | undefined {
    return this.operators.find((op) => op.id === this.currentOperatorId);
  },
  nodes: [],
  operators: [],
});

// External setter method, more code
const setCurrentOperator = (operatorId: string) =>
  setLocalState("currentOperatorId", operatorId);

10 Replies

sachaw•10mo ago

This is injected into a provider

lxsmnsyc•10mo ago

Seems right to me

sachaw•10mo ago

I was originally destructuring the state variable that I passed to the context provider, I have since changed that so it just passes localState, however it's stil not working:

createEffect(() => {
    console.log(localState.currentOperator);
  }, [localState.currentOperator]);

createEffect(() => {
    console.log(localState.currentOperator);
  }, [localState.currentOperator]);

This only ever gets fired once

lxsmnsyc•10mo ago

your second parameter doesn't do anything, SolidJS has automatic tracking

sachaw•10mo ago

remove it or leave an empty array?

lxsmnsyc•10mo ago

remove it, it's not like React anyways, for your issue, not exactly sure why this wouldn't work. A repro would be great to see

sachaw•10mo ago

I'll try to do a recreation, give me a few

sachaw•10mo ago

Must be something else in my application, this works as it should, I'll keep digging: https://playground.solidjs.com/anonymous/6515f38a-c74d-4b51-b37f-5a2ede1a2005

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

sachaw•10mo ago

Was a damn race condition Since Getters are working now, is there a concise way to have side effects when the store is updated, withoug having a dedicated createEffect. I want to be able to call a grpc endpoint on my server when certain state properties are updated.

aryzing•10mo ago

Side effect when a reactive value changes => createEffect

Gaming

Programming

Nicest way of having computed properties in a store?