Version 2.13.0

• support multiple store sync

createStore({
  yourDetail, // it's an object of your state { firstName: '', lastName: '' }
}, {
  syncStores : [
     { 
       externalStoreName: 'externalStoreName',
       transform: ({ externalStoreData, currentStoreData }) => {
         return { ...externalStoreData, ...currentStoreData };
        },
     }
  ]
})

Version 2.12.0

🥂 compatible with React Native

Example code below:

import React from "react";
import { TextInput, Button, View, AsyncStorage } from "react-native";
import {
  StateMachineProvider,
  createStore,
  setStorageType,
  useStateMachine
} from "little-state-machine";
import { useForm, Controller } from "react-hook-form";
import * as yup from "yup";

setStorageType(AsyncStorage);

createStore({});

function update(state, payload) {
  return {
    ...state,
    ...payload
  };
}

let counter = 0;

const Form = () => {
  const { handleSubmit, control, errors } = useForm({
    validationSchema: yup.object().shape({
      firstName: yup
        .string()
        .label("Name")
        .required()
    })
  });
  const { action, state } = useStateMachine(update);

  const onSubmit = formData => {
    action(formData);
  };

  const onChange = args => {
    return {
      value: args[0].nativeEvent.text
    };
  };
  
  counter++;

  return (
    <View style={{ marginTop: 40 }}>
      <Controller
        as={
          <TextInput
            style={{ borderWidth: 1, height: 80 }}
            placeholder="your name"
          />
        }
        control={control}
        name="firstName"
        onChange={onChange}
        defaultValue={state.firstName}
      />
      <Controller
        as={<TextInput style={{ borderWidth: 1, height: 80 }} />}
        control={control}
        name="lastName"
        onChange={onChange}
        defaultValue={state.lastName}
      />
      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
    </View>
  );
};

const App = () => (
  <StateMachineProvider>
    <Form />
  </StateMachineProvider>
);

export default App;

Version 2.11.3

• fix layout with dev tool

Version 2.11.2

• fix dev tool with SSR

Version 2.11.1

• improve on dev tool with action name

Version 2.11.0

• remove debugName & debugNames option to retrieve name from function name

Version 2.10.9

• fix [Bug] middleWares option expects state #19

Version 2.10.8

fix node usage

Version 2.10.7

• minor improvement support on TS

Version 2.10.0

Feature: sync with external stores in session/local storage:

This feature allows you to sync other stores which was stored in your session/local storage.

createStore({
  yourDetail, // it's an object of your state { firstName: '', lastName: '' }
}, {
  syncStores: { // you can sync with external store and transform the data
    name: 'externalStoreName',
    transform: (externalStore, currentStore) => {
      return { ...externalStore, ...currentStore };
    },
  }
})

or

createStore({
  yourDetail,
}, {
  syncStores: { 
    externalStoreName: ['yourDetail']
  }
})