Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
storeact
Advanced tools
Readme
Zero-configuration store for React. One API rule them all.
npm i storeact --save
import storeact from "storeact";
Let's make an increment/decrement simple application with React:
First, create your store. This is where your application state will live:
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const CounterStore = () => {
let count = 0;
return {
state() {
return count;
},
increase() {
count++;
},
decrease() {
count--;
},
async increaseAsync() {
await delay(1000);
this.increase();
},
};
};
The store is just pure function, we define some APIs and export count value via state() method
Now create your component. With Storeact your component can focus 100% on the UI and just call the actions that will automatically update the state:
const store = storeact(CounterStore);
function App() {
const count = store.select();
const { increase, decrease, increaseAsync } = store;
return (
<div className="App">
<h1>{count}</h1>
<div>
<button onClick={() => increase()}>Increase</button>
<button onClick={() => decrease()}>Decrease</button>
<button onClick={() => increaseAsync()}>Increase Async</button>
</div>
</div>
);
}
When an action is dispatching, storeact creates a task for each action call then pass that task as second argument of action. Using action task to control execution flow more easily.
const Store = () => {
let count = 0;
return {
increase() {
count++;
},
async increaseAsync(payload, task) {
await task.delay(1000);
this.increase();
},
};
};
const Store = () => {
return {
cancel() {},
async search(payload, task) {
task.cancelOn(this.cancel);
await task.delay(3000);
if (task.cancelled()) return;
// update state logic here
},
};
};
You can use debounce to wait certain amount of time before next execution block
const Store = () => {
return {
cancel() {},
async search(payload, task) {
await task.debounce(500);
// update state logic here
},
};
};
const Store = () => {
return {
async startDataFetching() {
const data = await fetch("api");
this.dataFetched(data);
},
dataFetched() {},
async search(payload, task) {
this.startDataFetching();
// wait until dataFetched action dispatched
const data = await task.when(this.dataFetched);
// do something
},
};
};
You can improve above example with cancellable searching logic
const Store = () => {
return {
async startDataFetching() {
const data = await fetch("api");
this.dataFetched(data);
},
dataFetched() {},
cancel() {},
async search(term, task) {
// search progress will be cancelled if cancel action dispatched
task.cancelOn(this.cancel);
await task.debounce(500);
this.startDataFetching(term);
// wait until dataFetched action dispatched
const data = await task.when(this.dataFetched);
// do something
},
};
};
You can use AsyncValue to handle async data loading easily
const TodoStore = ({ async }) => {
// create async value object with empty array as default value
const list = async([]);
return {
init(task) {
// start data loading
task.mutate(list, fetch("todo-api"));
},
state() {
// return todos state is promise
return { todos: list.promise };
},
};
};
In React component, to retrieve promised value we use selector util
const store = storeact(TodoStore);
const TodoCount = () => {
const count = store.select((state, util) => {
return util.value(state.todos).length;
});
return <h1>Todos ({count})</h1>;
};
const App = () => {
return (
<React.Suspense fallback="Loading...">
<TodoCount />
</React.Suspense>
);
};
A "Loading..." message will show if todos promise still not fulfilled
util.loadable()
Using util.loadable() to retrieve Loadable object to render loading progress manually
const store = storeact(TodoStore);
const TodoCount = () => {
const loadable = store.select((state, util) => {
return util.loadable(state.todos);
});
if (loadable.state === "loading") return <div>Loading...</div>;
if (loadable.state === "hasError")
return <div>Oops, something went wrong. {loadable.error.message}</div>;
// loadable.state === 'hasValue'
return <h1>Todos ({count})</h1>;
};
FAQs
Zero-configuration store for React. One API rule them all
The npm package storeact receives a total of 22 weekly downloads. As such, storeact popularity was classified as not popular.
We found that storeact 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.