[@xstate/store] useStore() and other improvements

[davidkpiano]

There is now a useStore() hook that allows you to create a local component store from a config object.

import { useStore, useSelector } from '@xstate/store/react';

function Counter() {
  const store = useStore({
    context: {
      name: 'David',
      count: 0
    },
    on: {
      inc: (ctx, { by }: { by: number }) => ({
        ...ctx,
        count: ctx.count + by
      })
    }
  });
  const count = useSelector(store, (state) => state.count);

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={() => store.trigger.inc({ by: 1 })}>
        Increment by 1
      </button>
      <button onClick={() => store.trigger.inc({ by: 5 })}>
        Increment by 5
      </button>
    </div>
  );
}

---

Added createStoreConfig to create a store config from an object. This is an identity function that returns the config unchanged, but is useful for type inference.

const storeConfig = createStoreConfig({
  context: { count: 0 },
  on: { inc: (ctx) => ({ ...ctx, count: ctx.count + 1 }) }
});

// Reusable store config:

const store = createStore(storeConfig);

// ...
function Comp1() {
  const store = useStore(storeConfig);

  // ...
}

function Comp2() {
  const store = useStore(storeConfig);

  // ...
}

---

The createStoreWithProducer(config) function now accepts an emits object (fix).

[changeset-bot]

🦋 Changeset detected

Latest commit: 9d0c0de

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@xstate/store	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Andarist]

Shouldn't one just use a reusable hook in this case?

[davidkpiano]

Hmm, I probably need to make this a better example