# @bigcommerce/data-store 中文文档

规范地址：https://npmcn.com/package/%40bigcommerce/data-store/

版本：1\.0\.3
npm 元数据更新时间：2026-10-13T23:32:57.477Z
中文译文更新时间：2026-11-08T02:13:26.845Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bigcommerce/data-store
原文对照：https://npmcn.com/package/%40bigcommerce/data-store/?lang=original
项目主页：https://github.com/bigcommerce/data-store-js
源码仓库：https://github.com/bigcommerce/data-store-js

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：62.4 kB，51 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：6 个
- 首次发布：2018-05-14T05:20:56.144Z
- 最新版本发布：2025-09-05T05:47:33.253Z
- 近 30 天下载量：8965（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 0 个）

## 中文简介

用于管理应用程序状态的 JavaScript 库

## 安装

```sh
npm install @bigcommerce/data-store
```

也可以使用：`pnpm add @bigcommerce/data-store`、`yarn add @bigcommerce/data-store`、`bun add @bigcommerce/data-store`

## README

# @ bigcommerce/ data- store (中文(简体) )

[![Build Status](https://travis-ci.com/bigcommerce/data-store-js.svg?token=pywwZy8zX1F5AzeQ9WpL&branch=master)](https://travis-ci.com/bigcommerce/data-store-js)

一个用于管理应用程序状态的JavaScript库.

它帮助您在应用程序中执行单向数据流,允许您:

-   订阅应用程序状态的更改
-   以连续和不可改变的方式更新状态

## 安装

您可以使用 [无](https://www.npmjs.com/get-npm)。 。 。 .

```sh
npm install --save @bigcommerce/data-store
```

## 所需资源

这个图书馆需要 [承诺多填充](https://github.com/stefanpenner/es6-promise) 如果您需要支持更旧的浏览器,例如 IE11.

您在使用此库时可能需要创建可观察文件( 请参见使用部分) 。 我们建议你使用 [rxjs (韩语)](https://github.com/ReactiveX/rxjs) 直到你本能创造它们的时候.

## 使用量

### 创建存储

```js
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);
```

### 更新当前状态

```js
import { createAction } from '@bigcommerce/data-store';

store.dispatch(createAction('INCREMENT'));
store.dispatch(createAction('UPDATE_COUNT', 10)));
```

要同步更新状态, 您需要创建一个可观察到的, 以释放动作 :

```js
import { Observable } from 'rxjs';

const action$ = Observable
    .ajax({ url: '/count' })
    .map(({ response }) => createAction('UPDATE_COUNT', response.count))

store.dispatch(action$);
```

为了避免种族条件,动作会在一个序列中被发出,除非您指定了不同的调度队列,即:

```js
store.dispatch(action$);
store.dispatch(action$);

// The following call does not wait for the previous calls
store.dispatch(action$, { queueId: 'foobar' });
```

如果您想进入其它商店, 但无法直接进入商店( 即: 在动作创建者内部) , 请在关闭中将可观察到的东西包起来 :

```js
// 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);
        });
}
```

```js
// In a component
store.dispatch(updateAction());
```

在同步发送后做一些事情:

```js
const { state } = await store.dispatch(action$);

console.log(state);
```

### 订阅更改

更改并提供最新数据:

```js
store.subscribe((state) => {
    console.log(state);
});
```

首次订阅时, 订阅者会被触发 。 除非数据有变化 否则它不会被触发.

要过滤无关的更改 :

```js
// Only trigger the subscriber if `count` changes
store.subscribe(
    (state) => { console.log(state); },
    (state) => state.count
);
```

### 改变国家与行动

转换返回值 `getState` 或参数值 `subscribe`数字 :

```js
const stateTransformer = (state) => ({ ...state, transformed: true });
const store = createDataStore(reducer, initialState, { stateTransformer });

console.log(store.getState()); // { count: 0, transformed: true }
```

改变已发送的行动:

```js
const actionTransformer = (action) => ({ ...action, transformed: true });
const store = createDataStore(reducer, initialState, { actionTransformer });

console.log(store.dispatch(createAction('INCREMENT'))); // { type: 'INCREMENT', transformed: true }
```

## 捐款

要释放:

```sh
npm run release
```

查看其它可用的命令 :

```sh
npm run
```

## 许可证

麻省理工学院

## 常见问题

### @bigcommerce/data-store 是什么？

用于管理应用程序状态的 JavaScript 库

### 如何安装 @bigcommerce/data-store？

在项目目录运行 npm install @bigcommerce/data-store，或使用 pnpm add / yarn add / bun add。

### @bigcommerce/data-store 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @bigcommerce/data-store 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @bigcommerce/data-store 可以商用吗？

@bigcommerce/data-store 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bigcommerce/data-store 的下载量有多少？

根据 npm 官方下载统计，@bigcommerce/data-store 在 2026/10/08 – 2026/11/06 这 30 天内被下载 8,965 次，日均约 299 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bigcommerce/data-store 还在维护吗？

最新版本 1\.0\.3 发布于 2025/09/05（1\.2 年前）；至今共发布 14 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/05/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。