Selectors

Selectors are not necessary because state field access is tracked by a Proxy wrapper. A selector can optionally be specified using the select attribute.

Register some state

Live Editor

const storeId = "selectors"; register(storeId, { state: ({ set }) => ({ counter: 0, inc: () => set(state => { state.counter += 1; }), dec: () => set(state => { state.counter -= 1; }) }) }); render(<StateInspector from={storeId} />);

const storeId = "selectors";

register(storeId, {
  state: ({ set }) => ({
    counter: 0,
    inc: () =>
      set(state => {
        state.counter += 1;
      }),
    dec: () =>
      set(state => {
        state.counter -= 1;
      })
  })
});

render(<StateInspector from={storeId} />);

Result

Loading...

Access state without a selector:

Live Editor

const storeId = "selectors"; render( <State from={storeId}> {({ counter, inc, dec }) => ( <> <div>Counter: {counter}</div> <button onClick={inc}>+</button> <button onClick={dec}>-</button> <StateInspector from={storeId} /> </> )} </State> );

const storeId = "selectors";

render(
  <State from={storeId}>
    {({ counter, inc, dec }) => (
      <>
        <div>Counter: {counter}</div>
        <button onClick={inc}>+</button>
        <button onClick={dec}>-</button>
        <StateInspector from={storeId} />
      </>
    )}
  </State>
);

Result

Loading...

Access state with a selector

Live Editor

const storeId = "selectors"; render( <State from={storeId} select={({ counter, inc, dec }) => ({ counter, inc, dec })} > {({ counter, inc, dec }) => ( <> <div>Counter: {counter}</div> <button onClick={inc}>+</button> <button onClick={dec}>-</button> <StateInspector from={storeId} /> </> )} </State> );

const storeId = "selectors";

render(
  <State
    from={storeId}
    select={({ counter, inc, dec }) => ({ counter, inc, dec })}
  >
    {({ counter, inc, dec }) => (
      <>
        <div>Counter: {counter}</div>
        <button onClick={inc}>+</button>
        <button onClick={dec}>-</button>
        <StateInspector from={storeId} />
      </>
    )}
  </State>
);

Result

Loading...