Version 5.0.0

🎉 Version 5.0.0

• Fine-tune the performance with partial render and selector

const selector = (state) => state.yourDetails.name.length > 10;

const { actions, state, getState } = useStateMachine<T>({
  actions?: Record<string, Function> // Optional action to update global state
  selector,
});

• Isolated re-render at useStateMachine usgae, no longer use Context API

const App = () => (
- <StateMachineProvider>
    <YourComponent />
- <StateMachineProvider>
);

Version v5.0.0-next.1

😌 Simplify the API (Goodbye Context API)
🚅 Improved performance
⛏️ Selector re-render

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

createStore({
  yourDetail: { name: '' },
});

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

function selector(state) {
  return state.yourDetails.name.length > 10;
}

function YourComponent() {
  const { actions, state } = useStateMachine({ actions: { updateName } });

  return (
    <buttton onClick={() => actions.updateName({ name: 'bill' })}>
      {state.yourDetail.name}
    </buttton>
  );
}

function YourComponentSelectorRender() {
  const { state } = useStateMachine({ selector });
  return <p>{state.yourDetail.name]</p>;
}

const App = () => (
  <>
    <YourComponent />
    <YourComponentSelectorRender />
  </>
);

Version 4.8.1

• update react 19 dependency

Version 4.8.0

Context

The new method will retrieve the latest store value when an action is performed, this is great for usage such as re-render is not required and yet you want to retrieve the newest store value.

Example

const update  = (state: GlobalState, payload: string) => {
  return {
    ...state,
    value: payload
  }
}

const { getState, actions } = useStateMachine({
  update,
});

<button onClick={() => actions.update('test', { skipRender: true })}>Update<button≥ 
<button onClick={() => getState()}>Get State<button≥ 

Version 4.7.0

• introduce persist none option which you can skip saving data into session storage and this package can be use with React Native with this config set to none as well

createStore(
  {
    yourDetail: { firstName: '', lastName: '' } // it's an object of your state
  },
  {
     // when 'none' is used then state is not persisted
     // when 'action' is used then state is saved to the storage after store action is completed
     // when 'beforeUnload' is used then state is saved to storage before page unload and is restored
     // after next page load and then storage is cleared
     persist?: 'action' // onAction is default if not provided
  },
);

huge thanks to @snax4a

Version 4.6.0

• add new option for skip context re-render

const { actions } = useStateMachine()

// The following action will only update the store without flushing down a context re-render update
actions.updateStore({
  test: 'data'
}, { skipRender: true })

v4.4.1

4.4.1 (2022-05-29)

Bug Fixes

• the persist option check (#126) (bc10b65)

v4.4.0

4.4.0 (2022-05-29)

Features

• fix options for persist store (#123) (f47288e)

Version 4.2.4

type update: allow actions payload to be optional

export type ActionsOutput<
  TCallback extends AnyCallback,
  TActions extends AnyActions<TCallback>
> = {
-  [K in keyof TActions]: (payload: Parameters<TActions[K]>[1]) => void;
+  [K in keyof TActions]: (payload?: Parameters<TActions[K]>[1]) => void;
};

Version 4.2.3

fix: type issue with createStore optional argument