Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
little-state-machine
Advanced tools
The little-state-machine npm package is a lightweight state management library for React applications. It is designed to be simple and easy to use, making it ideal for small to medium-sized projects where you need to manage state without the overhead of more complex solutions.
State Initialization
This feature allows you to initialize the state of your application. The `createStore` function is used to create a store with an initial state.
import { createStore } from 'little-state-machine';
const initialState = {
user: {
name: '',
age: 0
}
};
const store = createStore(initialState);
State Update
This feature allows you to update the state. The `useStateMachine` hook is used to access actions that can update the state. In this example, the `updateUser` action updates the user information in the state.
import { useStateMachine } from 'little-state-machine';
const updateUser = (state, payload) => ({
...state,
user: {
...state.user,
...payload
}
});
const Component = () => {
const { actions } = useStateMachine({ updateUser });
const handleUpdate = () => {
actions.updateUser({ name: 'John', age: 30 });
};
return <button onClick={handleUpdate}>Update User</button>;
};
State Access
This feature allows you to access the current state. The `useStateMachine` hook is used to access the state, which can then be used in your components.
import { useStateMachine } from 'little-state-machine';
const Component = () => {
const { state } = useStateMachine();
return (
<div>
<p>Name: {state.user.name}</p>
<p>Age: {state.user.age}</p>
</div>
);
};
Redux is a popular state management library for JavaScript applications. It is more complex and feature-rich compared to little-state-machine, making it suitable for larger applications with more complex state management needs.
MobX is a state management library that makes state management simple and scalable by transparently applying functional reactive programming. It is more flexible and powerful than little-state-machine, but also comes with a steeper learning curve.
Zustand is a small, fast, and scalable state management solution for React. It is similar to little-state-machine in terms of simplicity and ease of use, but offers more features and better performance.
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>;
If you run into issues, feel free to open an issue.
Consider adding Object.entries()
polyfill if you're wondering to have support for old browsers.
You can weather consider adding snippet below into your code, ideally before your App.js file:
utils.[js|ts]
if (!Object.entries) {
Object.entries = function (obj) {
var ownProps = Object.keys(obj),
i = ownProps.length,
resArray = new Array(i); // preallocate the Array
while (i--) resArray[i] = [ownProps[i], obj[ownProps[i]]];
return resArray;
};
}
Or you can add core-js polyfill into your project and add core-js/es/object/entries
in your polyfills.[js|ts]
file.
Thank you very much for those kind people with their sponsorship to this project.
FAQs
State management made super simple
The npm package little-state-machine receives a total of 225,842 weekly downloads. As such, little-state-machine popularity was classified as popular.
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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.