@proscom/prostore - npm Package Compare versions

Comparing version 0.2.2 to 0.2.4

lib/AsyncBehaviorStore.d.ts

@@ -11,3 +11,3 @@ import { BehaviorStore, IStateUpdater } from './BehaviorStore';
  */
-export declare class AsyncBehaviorStore<State> extends BehaviorStore<State> {
+export declare class AsyncBehaviorStore<State extends object> extends BehaviorStore<State> {
     _queuedUpdates: IStateUpdater<State>[];
@@ -14,0 +14,0 @@ _queuedTimeout: any;

lib/BehaviorStore.d.ts

 import { BehaviorSubject } from 'rxjs';
 import { IStore } from './IStore';
-export declare type IStateUpdaterFunc<State> = (state: State) => Partial<State>;
-export declare type IStateUpdater<State> = Partial<State> | IStateUpdaterFunc<State>;
+export declare type IStateUpdaterFunc<State extends object> = (state: State) => Partial<State>;
+export declare type IStateUpdater<State extends object> = Partial<State> | IStateUpdaterFunc<State>;
 /**
@@ -13,3 +13,3 @@ * Prostore which uses BehaviorSubject to hold its state.
  */
-export declare class BehaviorStore<State> implements IStore<State> {
+export declare class BehaviorStore<State extends object> implements IStore<State> {
     state$: BehaviorSubject<State>;
@@ -16,0 +16,0 @@ get state(): State;

lib/es/AsyncBehaviorStore.d.ts

@@ -11,3 +11,3 @@ import { BehaviorStore, IStateUpdater } from './BehaviorStore';
  */
-export declare class AsyncBehaviorStore<State> extends BehaviorStore<State> {
+export declare class AsyncBehaviorStore<State extends object> extends BehaviorStore<State> {
     _queuedUpdates: IStateUpdater<State>[];
@@ -14,0 +14,0 @@ _queuedTimeout: any;

lib/es/BehaviorStore.d.ts

 import { BehaviorSubject } from 'rxjs';
 import { IStore } from './IStore';
-export declare type IStateUpdaterFunc<State> = (state: State) => Partial<State>;
-export declare type IStateUpdater<State> = Partial<State> | IStateUpdaterFunc<State>;
+export declare type IStateUpdaterFunc<State extends object> = (state: State) => Partial<State>;
+export declare type IStateUpdater<State extends object> = Partial<State> | IStateUpdaterFunc<State>;
 /**
@@ -13,3 +13,3 @@ * Prostore which uses BehaviorSubject to hold its state.
  */
-export declare class BehaviorStore<State> implements IStore<State> {
+export declare class BehaviorStore<State extends object> implements IStore<State> {
     state$: BehaviorSubject<State>;
@@ -16,0 +16,0 @@ get state(): State;

package.json

 {
   "name": "@proscom/prostore",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "State management library with multiple stores based on rxjs",
@@ -30,3 +30,3 @@ "author": "Andrew Starostin <[e-mail]>",
   "dependencies": {
-    "@proscom/ui-utils": "<0.1",
+    "@proscom/ui-utils": "<0.2",
     "lodash": "^4.17.14",
@@ -41,3 +41,3 @@ "tslib": "^2.0.3"
   },
-  "gitHead": "a6da0492505e2da0e4ba17ab191f34855c039484"
+  "gitHead": "ce19c247d0400cab79c7de80235460c09a764f5a"
 }

README.md

@@ -63,2 +63,38 @@ # prostore
 
+### ValueStore
+
+Это самый простой стор, который есть в `prostore`.
+Он представляет собой простую обертку над `BehaviorSubject`.
+
+```typescript
+// Создание стора со значением по-умолчанию
+const store = new ValueStore(5);
+
+// Подписка на изменение значения
+store.state$.subscribe((value) => {
+  console.log('changed', value);
+});
+
+// Изменение значения
+store.setState(6);
+```
+
+Класс `ValueStore` можно расширить, добавив в него дополнительные методы:
+
+```typescript
+class IncrementStore extends ValueStore {
+  constructor() {
+    super(0);
+  }
+
+  increment() {
+    this.setState(this.state + 1);
+  }
+
+  decrement() {
+    this.setState(this.state - 1);
+  }
+}
+```
+
 ### BehaviorStore
@@ -91,5 +127,7 @@
 
-Это должен быть именно объект. Состояние не может быть массивом или простым типом.
-Поэтому если надо использова не-объект, то оберните его в объект, присвоив
-какому-нибудь ключу:
+В отличие от `ValueStore`, `BehaviorStore` содержит дополнительную логику объединения ключей
+и частичного обновления состояния (как в классовых React-компонентах).
+Поэтому состоянием стора должен быть именно объект. Состояние не может быть массивом или простым типом.
+Поэтому если надо использован не-объект, то оберните его в объект, присвоив
+какому-нибудь ключу, либо используйте `ValueStore`:
 
@@ -369,2 +407,71 @@ ```typescript
 
+### События сторов
+
+Можно использовать стор, как эмиттер произвольных событий.
+Например, это может быть полезно при реализации фронтенда на компонентном фреймворке, когда нужно передать событие клика из одного компонента в другой, если они не связаны прямой иерархией (один не является родителем другого).
+Такое событие нельзя надежно передать через подписку на состояние, так как состояние может быть изменено также другими событиями.
+При подписке на состояние нельзя достоверно определить, каким событием это состояние было изменено, поэтому надо подписываться на само событие.
+
+Например, пусть стор хранит число, которое можно увеличить или уменьшить. Уменьшение и увеличение значения стора - это событие.
+Если мы хотим, чтобы действие выполнялось только при увеличении значения, то у нас есть два варианта:
+
+1. Подписаться на состояние и сравнивать его с предыдущим, определяя, увеличилось оно, или нет. Такая фильтрация изменений состояния с целью определения события возможна в этом конкретном случае, но не в произвольном.
+2. Подписаться непосредственно на событие увеличения значения.
+
+Для того, чтобы создать событие, на которое можно подписаться, в сторе добавьте отдельным полем новый `Subject`, соответствующий событию.
+Можно также создать один общий `Subject` на все события, как в примере ниже с шиной событий, только на уровне одного стора.
+Но для примера рассмотрим вариант, когда на каждое событие создаётся отдельный `Subject`.
+
+```typescript
+import { Subject } from 'rxjs';
+import { BehaviorStore } from '@proscom/prostore';
+import { useStore, useObservableCallback } from '@proscom/prostore-react';
+
+interface DataStoreState {
+  value: number;
+}
+
+class DataStore extends BehaviorStore<DataStoreState> {
+  onIncrement$ = new Subject<number>();
+  onDecrement$ = new Subject<number>();
+
+  constructor() {
+    super({ value: 0 });
+  }
+
+  increment() {
+    const value = this.state.value + 1;
+    this.setState({ value });
+    this.onIncrement$.next(value);
+  }
+
+  decrement() {
+    const value = this.state.value - 1;
+    this.setState({ value });
+    this.onDecrement$.next(value);
+  }
+}
+
+const dataStore = new DataStore();
+
+function MyComponent() {
+  const [state, store] = useStore(dataStore);
+  console.log('component rendered', state.value);
+
+  useObservableCallback(store.onIncrement$, (value) => {
+    console.log('store incremented', value);
+  });
+  // ...
+}
+```
+
+В примере выше при вызове `dataStore.increment()` в консоль будет выведено следующее:
+
+```
+component rendered 1
+store incremented 1
+```
+
+[https://codesandbox.io/s/prostore-events-8z779](https://codesandbox.io/s/prostore-events-8z779)
+
 ### Шина событий
@@ -371,0 +478,0 @@

src/AsyncBehaviorStore.ts

@@ -12,3 +12,3 @@ import { BehaviorStore, IStateUpdater } from './BehaviorStore';
  */
-export class AsyncBehaviorStore<State> extends BehaviorStore<State> {
+export class AsyncBehaviorStore<State extends object> extends BehaviorStore<State> {
   _queuedUpdates: IStateUpdater<State>[] = [];
@@ -15,0 +15,0 @@ _queuedTimeout: any = null;

src/BehaviorStore.ts

 import { BehaviorSubject } from 'rxjs';
 import { IStore } from './IStore';
 
-export type IStateUpdaterFunc<State> = (state: State) => Partial<State>;
-export type IStateUpdater<State> = Partial<State> | IStateUpdaterFunc<State>;
+export type IStateUpdaterFunc<State extends object> = (state: State) => Partial<State>;
+export type IStateUpdater<State extends object> = Partial<State> | IStateUpdaterFunc<State>;
 
@@ -15,3 +15,3 @@ /**
  */
-export class BehaviorStore<State> implements IStore<State> {
+export class BehaviorStore<State extends object> implements IStore<State> {
   state$: BehaviorSubject<State>;
@@ -18,0 +18,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

116896

increased by7.66%

Number of package files

86

increased by8.86%

Lines of code

1823

increased by3.93%

Number of lines in readme file

563

increased by23.46%

Dependency changes

• + Added@proscom/ui-utils@0.1.18(transitive)

• + Addedasync@3.2.6(transitive)

• + Addedts-custom-error@3.3.1(transitive)

• - Removed@proscom/ui-utils@0.0.7(transitive)

• - Removedlodash-es@4.17.21(transitive)

• Updated@proscom/ui-utils@<0.2