Little State Machine Devtools
State management made super simple
[](https://twitter.com/intent/tweet?text=Little-State-Machine&url=https://github.com/bluebill1049/little-state-machine) [](https://www.npmjs.com/package/little-state-machine-devtools)
[](https://www.npmjs.com/package/little-state-machine-devtools)
📦 Installation
$ npm install little-state-machine-devtools
Check out the Demo.
```jsx
import { DevTool } from 'little-state-machine-devtools'
{process.env.NODE_ENV !== 'production' && }
```
📖 Example
📋 `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' && }
)
}
```
📋 `yourComponent.js`
```jsx
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 action({ name: 'bill' })}>{name}
}
```
📋 `yourDetail.js`
```js
export default {
name: 'test',
}
```
📋 `action.js`
```js
export function updateName(state, payload) {
return {
...state,
yourDetail: {
...state.yourDetail,
...payload,
},
}
}
```
