Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
little-state-machine
Advanced tools
Readme
sessionStorage
or localStorage
)$ npm install little-state-machine
StateMachineProvider
This is a Provider Component to wrapper around your entire app in order to create context.
<StateMachineProvider>
<App />
</StateMachineProvider>
createStore
Function to initialize the global store, invoked at your app root (where <StateMachineProvider />
lives).
function log(store) {
console.log(store);
return store;
}
createStore(
{
yourDetail: { firstName: '', lastName: '' } // it's an object of your state
},
{
name?: string; // rename the store
middleWares?: [ log ]; // function to invoke each action
storageType?: Storage; // session/local storage (default to session)
},
);
useStateMachine
This hook function will return action/actions and state of the app.
const { actions, state } = useStateMachine<T>({
updateYourDetail,
});
Quick video tutorial on little state machine.
Check out the Demo.
import React from 'react';
import {
StateMachineProvider,
createStore,
useStateMachine,
} from 'little-state-machine';
createStore({
yourDetail: { name: '' },
});
function updateName(state, payload) {
return {
...state,
yourDetail: {
...state.yourDetail,
...payload,
},
};
}
function YourComponent() {
const { actions, state } = useStateMachine({ updateName });
return (
<div onClick={() => actions.updateName({ name: 'bill' })}>
{state.yourDetail.name}
</div>
);
}
export default () => (
<StateMachineProvider>
<YourComponent />
</StateMachineProvider>
);
You can create a global.d.ts
file to declare your GlobalState's type.
Checkout the example.
import 'little-state-machine';
declare module 'little-state-machine' {
interface GlobalState {
yourDetail: {
name: string;
};
}
}
import * as React from 'react';
import {
createStore,
useStateMachine,
StateMachineProvider,
GlobalState,
} from 'little-state-machine';
createStore({
yourDetail: { name: '' },
});
const updateName = (state: GlobalState, payload: { name: string }) => ({
...state,
yourDetail: {
...state.yourDetail,
...payload,
},
});
const YourComponent = () => {
const { actions, state } = useStateMachine({
updateName,
});
return (
<div onClick={() => actions.updateName({ name: 'Kotaro' })}>
{state.yourDetail.name}
</div>
);
};
const App = () => (
<StateMachineProvider>
<YourComponent />
</StateMachineProvider>
);
DevTool component to track your state change and action.
import { DevTool } from 'little-state-machine-devtools';
<StateMachineProvider>
<DevTool />
</StateMachineProvider>;
FAQs
State management made super simple
We found that little-state-machine demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).