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

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

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

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

安装

您可以使用 无。 。 。 .

npm install --save @bigcommerce/data-store

所需资源

这个图书馆需要 承诺多填充 如果您需要支持更旧的浏览器,例如 IE11.

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

使用量

创建存储

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

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

import { Observable } from 'rxjs';

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

store.dispatch(action$);

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

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

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

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

// 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());

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

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

console.log(state);

订阅更改

更改并提供最新数据:

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

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

要过滤无关的更改 :

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

改变国家与行动

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

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

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

改变已发送的行动:

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

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

捐款

要释放:

npm run release

查看其它可用的命令 :

npm run

许可证

麻省理工学院