
Security News
AGENTS.md Gains Traction as an Open Format for AI Coding Agents
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
@bigcommerce/data-store
Advanced tools
A JavaScript library for managing application state.
It helps you to enforce unidirectional data flow in your application, by allowing you to:
You can install this library using npm.
npm install --save @bigcommerce/data-store
This library requires Promise polyfill if you need to support older browsers, such as IE11.
You may need to create Observables when using this library (please refer to the usage section). We recommend you to use rxjs until the time comes when you can create them natively.
import { createDataStore } from '@bigcommerce/data-store';
const reducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'UPDATE_COUNT':
return { ...state, count: action.payload };
default:
return state;
}
};
const initialState = { count: 0 };
const store = createDataStore(reducer, initialState);
import { createAction } from '@bigcommerce/data-store';
store.dispatch(createAction('INCREMENT'));
store.dispatch(createAction('UPDATE_COUNT', 10)));
To update the state asynchronously, you need to create an observable that emits actions:
import { Observable } from 'rxjs';
const action$ = Observable
.ajax({ url: '/count' })
.map(({ response }) => createAction('UPDATE_COUNT', response.count))
store.dispatch(action$);
To avoid race condition, actions get dispatched in a series unless you specify a different dispatch queue, i.e.:
store.dispatch(action$);
store.dispatch(action$);
// The following call does not wait for the previous calls
store.dispatch(action$, { queueId: 'foobar' });
Wrap the observable in a closure if you want to access the store elsewhere but don't have direct access to it (i.e.: inside an action creator):
// In an action creator
function updateAction() {
return (store) => Observable
.ajax({ url: '/count' })
.map(({ response }) => {
const { count } = store.getState();
return createAction('UPDATE_COUNT', count + response.count);
});
}
// In a component
store.dispatch(updateAction());
To do something after an asynchronous dispatch:
const { state } = await store.dispatch(action$);
console.log(state);
To changes and render the latest data:
store.subscribe((state) => {
console.log(state);
});
The subscriber will get triggered once when it is first subscribed. And it won't get triggered unless there's a data change.
To filter out irrelevant changes:
// Only trigger the subscriber if `count` changes
store.subscribe(
(state) => { console.log(state); },
(state) => state.count
);
To transform the return value of getState
or parameter value of subscribe
:
const stateTransformer = (state) => ({ ...state, transformed: true });
const store = createDataStore(reducer, initialState, { stateTransformer });
console.log(store.getState()); // { count: 0, transformed: true }
To transform dispatched actions:
const actionTransformer = (action) => ({ ...action, transformed: true });
const store = createDataStore(reducer, initialState, { actionTransformer });
console.log(store.dispatch(createAction('INCREMENT'))); // { type: 'INCREMENT', transformed: true }
To release:
npm run release
To see other available commands:
npm run
MIT
1.0.2 (2024-01-23)
<a name="1.0.1"></a>
FAQs
A JavaScript library for managing application state
The npm package @bigcommerce/data-store receives a total of 0 weekly downloads. As such, @bigcommerce/data-store popularity was classified as not popular.
We found that @bigcommerce/data-store demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 14 open source maintainers 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
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.