feat: v5

[bluebill1049]

V5

Context

• removed Context provider
• introduce selector

CSB

https://codesandbox.io/p/sandbox/jgxq4q?file=%2Fsrc%2FApp.tsx%3A1%2C1-55%2C1

Example

import { createStore, useStateMachine } from "little-state-machine";

createStore({
  yourDetail: { firstName: "1", lastName: "2" }, // it's an object of your state
});

function updateYourDetail(state, payload) {
  return {
    ...state,
    yourDetail: {
      ...state.yourDetail,
      ...payload,
    },
  };
}

function Other() {
  const { actions, state, getState } = useStateMachine(
    {
      updateYourDetail,
    },
    (data) => data.yourDetail.firstName // only re-render when firstName changes
  );

  return <p>{state.yourDetail.firstName}</p>;
}

export default function App() {
  const { actions, state, getState } = useStateMachine({
    updateYourDetail,
  });

  return (
    <div className="App">
      <button
        onClick={() => {
          actions.updateYourDetail({
            firstName: Math.random().toString(),
            lastName: Math.random().toString(),
          });
        }}
      >
        actions
      </button>
      {state.yourDetail.firstName}
      {state.yourDetail.lastName}

      <Other />
    </div>
  );
}