little-state-machine-devtools v3.0.0

$ npm install little-state-machine-devtools

{process.env.NODE_ENV !== 'production' && }

<div align="center">
  <a href="https://lrz5wloklm.csb.app/">
    <img width="500" src="https://github.com/bluebill1049/little-state-machine/blob/master/docs/DevToolScreen.png?raw=true" />
  </a>
</div>

<h2>📖 Example</h2>

📋 `app.js`
```jsx
import React from 'react'
import yourDetail from './yourDetail'
import YourComponent from './yourComponent'
import { createStore } from 'little-state-machine'
import { DevTool } from 'little-state-machine-devtools'

// The following code is for React Native usage
// import { AsyncStorage } from "react-native";
// setStorageType(AsyncStorage);

// create your store
createStore({
  yourDetail,
});

export default () => {
  return (
    <>
      {process.env.NODE_ENV !== 'production' && <DevTool />}
      <YourComponent />
    </>
  )
}

📋 yourComponent.js

import React from 'react'
import { updateName } from './action.js'
import { useStateMachine } from 'little-state-machine'

export default function YourComponent() {
  const {
    action,
    state: { yourDetail: { name } },
  } = useStateMachine({ actions: {updateName} });

  return <div onClick={() => action({ name: 'bill' })}>{name}</div>
}

📋 yourDetail.js

export default {
  name: 'test',
}

📋 action.js

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