{"id":19312113,"url":"https://github.com/bigcommerce/data-store-js","last_synced_at":"2025-04-22T15:31:53.039Z","repository":{"id":44842297,"uuid":"115056135","full_name":"bigcommerce/data-store-js","owner":"bigcommerce","description":"A JavaScript library for managing application state","archived":false,"fork":false,"pushed_at":"2024-03-12T19:39:47.000Z","size":1047,"stargazers_count":6,"open_issues_count":10,"forks_count":3,"subscribers_count":64,"default_branch":"master","last_synced_at":"2024-10-28T14:59:09.494Z","etag":null,"topics":["javascript","state-management"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bigcommerce.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-21T23:26:51.000Z","updated_at":"2024-02-06T20:09:52.000Z","dependencies_parsed_at":"2024-06-18T22:36:09.825Z","dependency_job_id":"43b9de33-6ae4-4663-8876-f98e8010a067","html_url":"https://github.com/bigcommerce/data-store-js","commit_stats":{"total_commits":65,"total_committers":3,"mean_commits":"21.666666666666668","dds":0.06153846153846154,"last_synced_commit":"0e21426935e60b2af60fff1023e59185672cd0a1"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fdata-store-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fdata-store-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fdata-store-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigcommerce%2Fdata-store-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bigcommerce","download_url":"https://codeload.github.com/bigcommerce/data-store-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223900372,"owners_count":17222028,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","state-management"],"created_at":"2024-11-10T00:32:54.848Z","updated_at":"2024-11-10T00:32:54.963Z","avatar_url":"https://github.com/bigcommerce.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @bigcommerce/data-store\n\n[![Build Status](https://travis-ci.com/bigcommerce/data-store-js.svg?token=pywwZy8zX1F5AzeQ9WpL\u0026branch=master)](https://travis-ci.com/bigcommerce/data-store-js)\n\nA JavaScript library for managing application state.\n\nIt helps you to enforce unidirectional data flow in your application, by allowing you to:\n* Subscribe to changes to the application state\n* Update the state in a serial and immutable fashion\n\n\n## Install\n\nYou can install this library using [npm](https://www.npmjs.com/get-npm).\n\n```sh\nnpm install --save @bigcommerce/data-store\n```\n\n\n## Requirements\n\nThis library requires [Promise polyfill](https://github.com/stefanpenner/es6-promise) if you need to support older browsers, such as IE11.\n\nYou may need to create Observables when using this library (please refer to the usage section). We recommend you to use [rxjs](https://github.com/ReactiveX/rxjs) until the time comes when you can create them natively.\n\n\n## Usage\n\n### Create a store\n\n```js\nimport { createDataStore } from '@bigcommerce/data-store';\n\nconst reducer = (state, action) =\u003e {\n    switch (action.type) {\n    case 'INCREMENT':\n        return { ...state, count: state.count + 1 };\n\n    case 'UPDATE_COUNT':\n        return { ...state, count: action.payload };\n\n    default:\n        return state;\n    }\n};\n\nconst initialState = { count: 0 };\nconst store = createDataStore(reducer, initialState);\n```\n\n### To update the current state\n\n```js\nimport { createAction } from '@bigcommerce/data-store';\n\nstore.dispatch(createAction('INCREMENT'));\nstore.dispatch(createAction('UPDATE_COUNT', 10)));\n```\n\nTo update the state asynchronously, you need to create an observable that emits actions:\n\n```js\nimport { Observable } from 'rxjs';\n\nconst action$ = Observable\n    .ajax({ url: '/count' })\n    .map(({ response }) =\u003e createAction('UPDATE_COUNT', response.count))\n\nstore.dispatch(action$);\n```\n\nTo avoid race condition, actions get dispatched in a series unless you specify a different dispatch queue, i.e.:\n\n```js\nstore.dispatch(action$);\nstore.dispatch(action$);\n\n// The following call does not wait for the previous calls\nstore.dispatch(action$, { queueId: 'foobar' });\n```\n\nWrap 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):\n\n```js\n// In an action creator\nfunction updateAction() {\n    return (store) =\u003e Observable\n        .ajax({ url: '/count' })\n        .map(({ response }) =\u003e {\n            const { count } = store.getState();\n\n            return createAction('UPDATE_COUNT', count + response.count);\n        });\n}\n```\n\n```js\n// In a component\nstore.dispatch(updateAction());\n```\n\nTo do something after an asynchronous dispatch:\n\n```js\nconst { state } = await store.dispatch(action$);\n\nconsole.log(state);\n```\n\n### To subscribe to changes\n\nTo changes and render the latest data:\n\n```js\nstore.subscribe((state) =\u003e {\n    console.log(state);\n});\n```\n\nThe subscriber will get triggered once when it is first subscribed. And it won't get triggered unless there's a data change.\n\nTo filter out irrelevant changes:\n\n```js\n// Only trigger the subscriber if `count` changes\nstore.subscribe(\n    (state) =\u003e { console.log(state); },\n    (state) =\u003e state.count\n);\n```\n\n### To transform states and actions\n\nTo transform the return value of `getState` or parameter value of `subscribe`:\n\n```js\nconst stateTransformer = (state) =\u003e ({ ...state, transformed: true });\nconst store = createDataStore(reducer, initialState, { stateTransformer });\n\nconsole.log(store.getState()); // { count: 0, transformed: true }\n```\n\nTo transform dispatched actions:\n\n```js\nconst actionTransformer = (action) =\u003e ({ ...action, transformed: true });\nconst store = createDataStore(reducer, initialState, { actionTransformer });\n\nconsole.log(store.dispatch(createAction('INCREMENT'))); // { type: 'INCREMENT', transformed: true }\n```\n\n\n## Contribution\n\nTo release:\n\n```sh\nnpm run release\n```\n\nTo see other available commands:\n\n```sh\nnpm run\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigcommerce%2Fdata-store-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbigcommerce%2Fdata-store-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigcommerce%2Fdata-store-js/lists"}