little-state-machine-devtools
v2.0.2
Published
<div align="center"><a href="https://lrz5wloklm.csb.app/"><img src="https://github.com/bluebill1049/little-state-machine/blob/master/docs/logo.png?raw=true" alt="Little State Machine - React Hooks for state management" width="140px" /></a> <h1>Little
Downloads
2,922
Readme
State management made super simple
$ npm install little-state-machine-devtools
import { DevTool } from 'little-state-machine-devtools'
<StateMachineProvider>
{process.env.NODE_ENV !== 'production' && <DevTool />}
</StateMachineProvider>
📋 app.js
import React from 'react'
import yourDetail from './yourDetail'
import YourComponent from './yourComponent'
import { StateMachineProvider, 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 (
<StateMachineProvider>
{process.env.NODE_ENV !== 'production' && <DevTool />}
<YourComponent />
</StateMachineProvider>
)
}
📋 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(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,
},
}
}