@tramvai/state 1.8.5 → 1.9.0

package/README.en.md

@@ -0,0 +1,53 @@
+# State
+
+**State** is a library built into `tramvai` for managing application state.
+
+## Peculiarities
+
+- Redux-like state manager
+- Built-in library similar to [redux-act](https://github.com/pauldijou/redux-act) to reduce boilerplate code
+- Contains bindings to `react` components such as `connect` and `useSelector`
+- Dynamic initialization of reducers. You can register a reducer at any time or generate a new one.
+- Point subscriptions to changes in the states of reducers. When data changes, only the affected `connect` and `useSelector` are recalculated, not everything.
+- Support for SSR mode.
+
+## Basic concepts
+
+- Store - A class that contains the state of all reducers, change subscriptions and is created for each client
+- Reducers - entities in which we describe how data will be stored and transformed
+- Events - events with which you can change the states of reducers
+- Actions - functions that allow you to perform side effects and update data in the store. Similar to `redux-thunk`
+
+## Recommendations
+
+- You cannot mutate data in reducers. Otherwise, due to various optimizations, subscribers will not be notified about the changes.
+- Initialize reducers as early as possible and before using it. Otherwise, when calling `dispatch(userLoadInformation())`, the reducer will not yet track events and will not receive data.
+- Do not store static data in stores. Since this data will be transferred from the server to the client, the data will be duplicated. Better to put in constants.
+- Break into small reducers. Otherwise, we have a huge reducer that contains a large amount of information and any changes will cause recalculations for a large number of components.
+
+## Installation
+
+```bash
+npm i --save @tramvai/state
+```
+
+## Basic example
+
+```tsx
+import { createReducer, createEvent } from '@tramvai/state';
+
+export const userLoadInformation = createEvent('user load information');
+export const userAddInformation = createEvent('user add information');
+
+const userReducer = createReducer('user', {
+  info: {},
+})
+  .on(userLoadInformation, (state, info) => ({ info }))
+  .on(userAddInformation, (state, { name, info }) => ({
+    ...state,
+    state: {
+      ...state.info,
+      [name]: info,
+    },
+  }));
+```

package/lib/connect/hooks/README.en.md

@@ -0,0 +1,135 @@
+# State hooks
+
+## useActions
+
+Allows to execute tram [actions](concepts/action.md) in React components
+
+### Interface
+
+- `actions` - one or an array of tram actions
+
+> If you pass an array to `useActions`, for typing you need to specify `as const` - `useActions([] as const)`
+
+### Usage
+
+```tsx
+import { useActions } from '@tramvai/state';
+import { loadUserAction, getInformationAction, setInformationAction } from './actions';
+
+export const Component = () => {
+  // if you pass one action, the payload type for loadUser is automatically deduced
+  const loadUser = useActions(loadUserAction);
+
+  // if you pass a list of actions, `as const` is required for correct type inference
+  const [getInformation, setInformation] = useActions([
+    getInformationAction,
+    setInformationAction,
+  ] as const);
+
+  return (
+    <div>
+      <div onClick={loadUser}>load user</div>
+      <div onClick={getInformation}>get information</div>
+      <div onClick={() => setInformation({ user: 1 })}>set information</div>
+    </div>
+  );
+};
+```
+
+## useSelector ()
+
+Receiving data from the store in components
+
+### Interface
+
+- `stores: []` - a list of tokens that the selector will subscribe to. Will affect which store changes will trigger an update in the component
+- `selector: (state) => any` - the selector itself, this is a function that will be called upon initialization and any changes to the stores passed to `stores`. The function should return data that can be used in the component
+- `equalityFn?: (cur, prev) => boolean` - optional function to change the way of comparing past and new values ​​of a selector
+
+### Usage
+
+To get data from a store, you can use a store name, a reference to a store, or an object with an optional store:
+
+- `'storeName'`
+- `storeObject`
+- `{ store: storeObject, optional: true }`
+- `{ store: 'storeName', optional: true }`
+
+You can pass an array of keys, then for correct type inference it is better to use `as const`:
+
+- `useSelector(['fooStoreName', barStoreObject] as const, ({ foo, bar }) => null)`;
+
+```tsx
+import { useSelector } from '@tramvai/state';
+
+export const Component = () => {
+  const isBrowser = useSelector('media', (state) => state.media.isBrowser);
+
+  return <div>{isBrowser ? <span>Browser</span> : <span>Desktop</span>}</div>;
+};
+```
+
+### Optimizations
+
+In order to reduce the number of component redrawings, after each call to `selector`, the return values ​​are checked against those that were before. If the returned selector data has not changed, then the component will not be redrawn.
+
+For this reason, it is better to get small chunks of information in selectors. Then there is less chance that the component will be updated. For example: we need the user's `roles`, we write a selector that requests all user data `(state) => state.user` and now any changes to the `user` reducer will update the component. It is better if we receive only the necessary data `(state) => state.user.roles`, in which case the component will be redrawn only when the user's `roles` change
+
+## useStoreSelector
+
+A simplified version of the useSelector hook into which only one store can be passed, created via createReducer. It was made to improve the inference of selector types, since useSelector itself cannot do this due to the use of strings, tokens and BaseStore heirs inside string names
+
+### Interface
+
+- `store: Reducer` - Store created through createReducer
+- `selector: (state) => any` - the selector itself, this is a function that will be called upon initialization and any changes to the store passed to `stores`. The function should return data that can be used in the component
+
+### Usage
+
+```tsx
+import { useStoreSelector } from '@tramvai/state';
+import { createReducer } from '@tramvai/state';
+
+const myStore = createReducer('myStore', { id: '123' });
+
+export const Component = () => {
+  const id = useStoreSelector((myStore, (state) => state.id)); // The id type will be correctly inferred as "string"
+
+  return <div>{id}</div>;
+};
+```
+
+### Optimizations
+
+The hook is a wrapper over useSelector, so the optimizations are the same. The selector function itself is memoized inside
+
+## useStore
+
+Hook to get the state of a specific reducer.
+
+Peculiarities:
+
+- automatically displays the type of state
+- re-renders the component only when the reducer is updated
+- allows you to create reducers "on the fly"
+
+### Interface
+
+- `store: Reducer` - Store created by createReducer
+
+### Usage
+
+Basic example:
+
+```tsx
+import { useStore } from '@tramvai/state';
+import { createReducer } from '@tramvai/state';
+
+const userReducer = createReducer('user', { id: '123' });
+
+export const Component = () => {
+  const { id } = useStore(userReducer);
+
+  return <div>{id}</div>;
+};
+```

package/lib/createEvent/README.en.md

@@ -0,0 +1,63 @@
+# createEvent
+
+The `createEvent` method creates an event that can be subscribed to in state management
+
+## Method Description
+
+`createEvent(eventName: string, payloadCreator?: PayloadTransformer): EventCreator`
+
+- `eventName` - Unique identifier of the event
+- `payloadCreator` - an optional function that allows you to combine multiple arguments into one, In cases where the event was called with multiple arguments.
+
+## Examples
+
+#### Creating an event without parameters
+
+```tsx
+import { createEvent } from '@tramvai/state';
+
+const userLoadingInformation = createEvent('user loading information');
+
+userLoadingInformation();
+```
+
+#### Creating an event with parameters
+
+```tsx
+import { createEvent } from '@tramvai/state';
+
+const userInformation = createEvent<{ age: number; name: string }>('user information');
+
+userInformation({ age: 42, name: 'Tom' });
+```
+
+#### Create event with payload conversion
+
+```tsx
+import { createEvent } from '@tramvai/state';
+
+const itemPrice = createEvent('user information', (info: string, price: number) => ({
+  [info]: price,
+}));
+
+itemPrice('car', 3000);
+```
+
+#### Using Events in Actions
+
+We create an action in which, after loading the information, we create an event and throw it into context.dispatch
+
+```javascript
+import { createAction } from '@tramvai/core';
+import { createEvent } from '@tramvai/state';
+
+const userInformation = createEvent < { age: number, name: string } > 'user information';
+
+const action = createAction({
+  name: 'userLoadInformation',
+  fn: async (context) => {
+    const result = await tinkoffRequest({ method: 'information' });
+    context.dispatch(userInformation(result));
+  },
+});
+```

package/lib/createReducer/README.en.md

@@ -0,0 +1,101 @@
+# createReducer
+
+The `createReducer` method creates reducer functions that describe the state during initialization and the reaction to state changes.
+
+The working principle and api is built based on: https://redux.js.org/basics/reducers and the use interface from https://github.com/pauldijou/redux-act#createreducerhandlers-defaultstate
+
+### Method Description
+
+`createReducer(name, initialState)`
+
+- `name` - unique name of the reducer. Should not overlap with other reducers
+- `initialState` - default reducer state
+
+### Typing
+
+By default, the reducer state type and name are displayed automatically:
+
+```tsx
+import { createReducer } from '@tramvai/state';
+
+const userReducer = createReducer('user', { name: 'anonymus' });
+```
+
+Why do we need typing for the name of the reducer at all?
+Then this reducer will be more convenient to use together with `useSelector`.
+
+If you pass the state type manually, it is desirable to specify the name as the second argument of the generic:
+
+```tsx
+import { createReducer } from '@tramvai/state';
+
+type UserState = { name: string };
+
+const userReducer = createReducer<UserState, 'user'>('user', { name: 'anonymus' });
+```
+
+But, you can simply set the desired type for `initialState`:
+
+```tsx
+import { createReducer } from '@tramvai/state';
+
+type UserState = { name?: string };
+
+const userReducer = createReducer('user', {} as UserState);
+```
+
+### Subscription to events
+
+`.on(evnet, reducer)` When creating a reducer, the .on method becomes available, which allows you to subscribe to events and return a new state
+
+- `event` - an event or a string to which the reducer will be subscribed
+- `reducer(state, payload)` - a pure function that takes the current `state`, `payload` from the event and must return the new state of the reducer
+
+**_An example of using the `.on` method_**
+
+```javascript
+import { createReducer, createEvent } from '@tramvai/state';
+
+export const userLoadInformation = createEvent < { status: string } > 'user load information';
+export const userAddInformation = createEvent < { name: string, info: {} } > 'user add information';
+
+const userReducer = createReducer('user', {
+  info: {},
+})
+  .on(userLoadInformation, (state, info) => ({ info }))
+  .on(userAddInformation, (state, { name, info }) => ({
+    ...state,
+    state: {
+      ...state.info,
+      [name]: info,
+    },
+  }));
+```
+
+### Automatic creation of events
+
+`.createEvents(model)` method that removes the need to create and explicitly bind events
+
+- `model` - an object in which the key is the event identifier, which will then be passed to `createEvent`, and the value is the reducer function, which will get into the `.on()` method and will be called when the events are triggered
+
+**_An example of using the `.createEvents` method_**
+
+```tsx
+import { createReducer } from '@tramvai/state';
+
+const userReducer = createReducer('user', {
+  info: {},
+});
+export const { userLoadInformation, userAddInformation } = userReducer.createEvents({
+  userLoadInformation: (state, info: { status: string }) => ({ info }),
+  userAddInformation: (state, { name, info }: { name: string; info: {} }) => ({
+    ...state,
+    state: {
+      ...state.info,
+      [name]: info,
+    },
+  }),
+});
+```
+
+It is imperative to describe the types of the `payload` argument in reducers, otherwise type inference for events will not work.

package/lib/devTools/README.en.md

@@ -0,0 +1,24 @@
+# Redux devtools
+
+To enable devtools, you need to run:
+
+- Install browser extension: [Chrome extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) or [FireFox extension](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/)
+- Open the page on `tramvai` and open the extension by clicking on the Redux devtools icon
+
+![Redux devtools](https://cloud.githubusercontent.com/assets/7957859/18002950/aacb82fc-6b93-11e6-9ae9-609862c18302.png)
+
+### Possible problems
+
+1. For a better user experience, you need to use a separate redux dev tools extension window, not a tab in chrome developer tools, because otherwise the action history is not saved, see [issue](https://github.com/zalmoxisus/redux-devtools-extension/issues/505).
+
+### Performance
+
+Since the entire state of the application with all the actions is quite large, there are noticeable brakes when working with devtools when using jumps over states/events and when a large number of actions are triggered simultaneously. That's why:
+
+1. Use customization techniques to set pickState to reduce the size of data in devtools.
+1. Increase the value of the latency parameter (passed to connectViaExtension.connect), which essentially debounces sending actions to the extension, see [docs](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#latency)
+
+### Additional links
+
+- [Devtools repository](https://github.com/zalmoxisus/redux-devtools-extension)
+- [Getting Started with Redux DevTools Extension ](https://egghead.io/lessons/javascript-getting-started-with-redux-dev-tools)

package/lib/index.js

@@ -169,7 +169,7 @@ class DispatcherContext extends SimpleEmitter {
             subscribe: this.subscribe.bind(this),
             dispatch: (...args) => dispatch(...args),
         };
-        dispatch = compose__default['default'](...middlewares.map((middleware) => middleware(api)))(this.applyDispatch);
+        dispatch = compose__default["default"](...middlewares.map((middleware) => middleware(api)))(this.applyDispatch);
         return dispatch;
     }
     // eslint-disable-next-line max-statements
@@ -468,9 +468,9 @@ function createDispatcher(options) {
     return new Dispatcher(options);
 }
 
-function createEvent(eventName, payloadCreator = identity__default['default']) {
+function createEvent(eventName, payloadCreator = identity__default["default"]) {
     if (process.env.NODE_ENV !== 'production') {
-        if (!isString__default['default'](eventName) || !eventName.length) {
+        if (!isString__default["default"](eventName) || !eventName.length) {
             throw new Error(`eventName should be not empty string, got '${eventName}'`);
         }
     }
@@ -555,7 +555,7 @@ class BaseStore extends SimpleEmitter {
         return this.state;
     }
     dehydrate() {
-        return pick__default['default'](Object.keys(this.hydrateKeys), this.state);
+        return pick__default["default"](Object.keys(this.hydrateKeys), this.state);
     }
     rehydrate(state) {
         this.setStateSilently(state);
@@ -637,7 +637,7 @@ function useActions(actions) {
     const context = useConsumerContext();
     const actionsRef = reactHooks.useShallowEqual(actions);
     return React.useMemo(() => {
-        if (isArray__default['default'](actionsRef)) {
+        if (isArray__default["default"](actionsRef)) {
             return actionsRef.map((action) => context.executeAction.bind(context, action));
         }
         return context.executeAction.bind(context, actionsRef);
@@ -659,7 +659,7 @@ function useStore(reducer) {
     const stateRef = React.useRef();
     const reducerRef = React.useRef(reducer);
     const addedReducerRef = React.useRef(null);
-    const unsubscribeRef = React.useRef(noop__default['default']);
+    const unsubscribeRef = React.useRef(noop__default["default"]);
     const [, forceRender] = React.useReducer((s) => s + 1, 0);
     React.useMemo(() => {
         // отписываемся от обновлений текущего редьюсера
@@ -713,13 +713,13 @@ function scheduling() {
 }
 
 const schedule = scheduling();
-function useSelector(storesOrStore, selector, equalityFn = shallowEqual__default['default']) {
-    invariant__default['default'](selector, `You must pass a selector to useSelectors`);
+function useSelector(storesOrStore, selector, equalityFn = shallowEqual__default["default"]) {
+    invariant__default["default"](selector, `You must pass a selector to useSelectors`);
     const context = useConsumerContext();
     const [, forceRender] = React.useReducer((s) => s + 1, 0);
     const renderIsScheduled = React.useRef(false);
     const storesRef = reactHooks.useShallowEqual(storesOrStore);
-    const subscription = React.useMemo(() => new Subscription(toArray__default['default'](storesRef).map(context.getStore)), [storesRef, context]);
+    const subscription = React.useMemo(() => new Subscription(toArray__default["default"](storesRef).map(context.getStore)), [storesRef, context]);
     const latestSubscriptionCallbackError = React.useRef();
     const latestSelector = React.useRef(selector);
     const latestSelectedState = React.useRef();
@@ -845,7 +845,7 @@ pure = true,
 ...connectOptions } = {}) {
     return function wrapWithConnect(WrappedComponent) {
         if (process.env.NODE_ENV !== 'production') {
-            invariant__default['default'](reactIs.isValidElementType(WrappedComponent), `You must pass a component to the function returned by ` +
+            invariant__default["default"](reactIs.isValidElementType(WrappedComponent), `You must pass a component to the function returned by ` +
                 `${methodName}. Instead received ${stringifyComponent(WrappedComponent)}`);
         }
         const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
@@ -875,7 +875,7 @@ pure = true,
             }, [props]);
             // Retrieve the store and ancestor subscription via context, if available
             const contextValue = useConsumerContext();
-            invariant__default['default'](Boolean(contextValue), `Could not find context in ` +
+            invariant__default["default"](Boolean(contextValue), `Could not find context in ` +
                 `"${displayName}". Either wrap the root component in a <Provider>, ` +
                 `or pass a custom React context provider to <Provider> and the corresponding ` +
                 `React context consumer to ${displayName} in connect options.`);
@@ -1011,43 +1011,43 @@ pure = true,
             // We memoize the elements for the rendered child component as an optimization.
             const renderedWrappedComponent = React.useMemo(
             // eslint-disable-next-line react/jsx-props-no-spreading
-            () => React__default['default'].createElement(WrappedComponent, Object.assign({}, actualChildProps, { ref: forwardedRef })), [forwardedRef, actualChildProps]);
+            () => React__default["default"].createElement(WrappedComponent, Object.assign({}, actualChildProps, { ref: forwardedRef })), [forwardedRef, actualChildProps]);
             return renderedWrappedComponent;
         };
         // If we're in "pure" mode, ensure our wrapper component only re-renders when incoming props have changed.
-        const Connect = pure ? React__default['default'].memo(ConnectFunction) : ConnectFunction;
+        const Connect = pure ? React__default["default"].memo(ConnectFunction) : ConnectFunction;
         Connect.WrappedComponent = WrappedComponent;
         Connect.displayName = displayName;
         if (forwardRef) {
-            const forwarded = React__default['default'].forwardRef(function forwardConnectRef(props, ref) {
+            const forwarded = React__default["default"].forwardRef(function forwardConnectRef(props, ref) {
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                return React__default['default'].createElement(Connect, Object.assign({}, props, { forwardedRef: ref }));
+                return React__default["default"].createElement(Connect, Object.assign({}, props, { forwardedRef: ref }));
             });
             forwarded.displayName = displayName;
             forwarded.WrappedComponent = WrappedComponent;
-            return hoistStatics__default['default'](forwarded, WrappedComponent);
+            return hoistStatics__default["default"](forwarded, WrappedComponent);
         }
-        return hoistStatics__default['default'](Connect, WrappedComponent);
+        return hoistStatics__default["default"](Connect, WrappedComponent);
     };
 }
 
 const getLogger = () => console;
 
 function verifyPlainObject(value, displayName, methodName) {
-    if (!isPlainObject__default['default'](value)) {
+    if (!isPlainObject__default["default"](value)) {
         getLogger().debug(`${methodName}() in ${displayName} must return a plain object. Instead received ${value}.`);
     }
 }
 
 function verifyFunction(value, displayName, methodName) {
-    if (!isFunction__default['default'](value)) {
+    if (!isFunction__default["default"](value)) {
         getLogger().debug(`${methodName}() in ${displayName} must be a function. Instead received ${JSON.stringify(value)}.`);
     }
 }
 
 function wrapMapToPropsConstant(getConstant) {
     return function initConstantSelector(context, options) {
-        const constantSelector = always__default['default'](getConstant(context, options));
+        const constantSelector = always__default["default"](getConstant(context, options));
         constantSelector.dependsOnOwnProps = false;
         return constantSelector;
     };
@@ -1102,7 +1102,7 @@ function wrapMapToPropsFunc(mapToProps, methodName) {
 }
 function wrapMapToPropsObject(actionsObject) {
     function getConstant({ executeAction }, { displayName }) {
-        return mapObject__default['default']((action, actionName) => {
+        return mapObject__default["default"]((action, actionName) => {
             if (process.env.NODE_ENV !== 'production') {
                 verifyFunction(action, displayName, actionName);
             }
@@ -1118,7 +1118,7 @@ function whenMapContextToPropsIsFunction(mapContextToProps) {
         : undefined;
 }
 function whenMapContextToPropsIsMissing(mapContextToProps) {
-    return !mapContextToProps ? wrapMapToPropsConstant(always__default['default']({})) : undefined;
+    return !mapContextToProps ? wrapMapToPropsConstant(always__default["default"]({})) : undefined;
 }
 function whenMapContextToPropsIsObject(mapContextToProps) {
     return typeof mapContextToProps === 'object' && mapContextToProps !== null
@@ -1137,7 +1137,7 @@ function whenMapStateToPropsIsFunction(mapStateToProps) {
         : undefined;
 }
 function whenMapStateToPropsIsMissing(mapStateToProps) {
-    return !mapStateToProps ? wrapMapToPropsConstant(always__default['default']({})) : undefined;
+    return !mapStateToProps ? wrapMapToPropsConstant(always__default["default"]({})) : undefined;
 }
 const mapStateToPropsFactories = [
     whenMapStateToPropsIsFunction,
@@ -1181,7 +1181,7 @@ const verifyMapToProps = (mapStateToProps, name) => {
     function verify(state, props) {
         const firstStateProps = mapStateToProps(state, props);
         const secondStateProps = mapStateToProps(state, props);
-        if (!shallowEqual__default['default'](firstStateProps, secondStateProps)) {
+        if (!shallowEqual__default["default"](firstStateProps, secondStateProps)) {
             getLogger().warn('Component "%s" recreate equal props %s', name, Object.keys(firstStateProps)
                 .filter((key) => firstStateProps[key] !== secondStateProps[key])
                 .map((key) => `"${key}"`)
@@ -1286,7 +1286,7 @@ function finalPropsSelectorFactory(context, { initMapStateToProps, initMapContex
 }
 
 const Provider = ({ context, children }) => {
-    return React__default['default'].createElement(ConnectContext.Provider, { value: context }, children);
+    return React__default["default"].createElement(ConnectContext.Provider, { value: context }, children);
 };
 
 /*
@@ -1316,7 +1316,7 @@ function match(arg, factories, name) {
 // createConnect with default args builds the 'official' connect behavior. Calling it with
 // different options opens up some testing and extensibility scenarios
 function createConnect({ connectHOC = connectAdvanced, mapStateToPropsFactories: mapStateToPropsFactories$1 = mapStateToPropsFactories, mapContextToPropsFactories: mapContextToPropsFactories$1 = mapContextToPropsFactories, mergePropsFactories: mergePropsFactories$1 = mergePropsFactories, selectorFactory = finalPropsSelectorFactory, schedule = scheduling(), } = {}) {
-    return (stores, mapStateToProps, mapContextToProps, mergeProps, { pure = true, areStatesEqual = strictEqual__default['default'], areOwnPropsEqual = shallowEqual__default['default'], areStatePropsEqual = shallowEqual__default['default'], areMergedPropsEqual = shallowEqual__default['default'], ...extraOptions } = {}
+    return (stores, mapStateToProps, mapContextToProps, mergeProps, { pure = true, areStatesEqual = strictEqual__default["default"], areOwnPropsEqual = shallowEqual__default["default"], areStatePropsEqual = shallowEqual__default["default"], areMergedPropsEqual = shallowEqual__default["default"], ...extraOptions } = {}
     // eslint-disable-next-line max-params
     ) => {
         // @ts-ignore

package/lib/index_middleware.js

@@ -14,13 +14,13 @@ var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
 var startsWith__default = /*#__PURE__*/_interopDefaultLegacy(startsWith);
 var isElement__default = /*#__PURE__*/_interopDefaultLegacy(isElement);
 
-const elementReplacer = pick__default['default'](['tagName', 'id', 'className']);
+const elementReplacer = pick__default["default"](['tagName', 'id', 'className']);
 // eslint-disable-next-line import/no-mutable-exports
 let devTools = {
-    init: noop__default['default'],
-    send: noop__default['default'],
-    subscribe: noop__default['default'],
-    error: noop__default['default'],
+    init: noop__default["default"],
+    send: noop__default["default"],
+    subscribe: noop__default["default"],
+    error: noop__default["default"],
 };
 // eslint-disable-next-line no-underscore-dangle,@typescript-eslint/no-explicit-any
 if (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__) {
@@ -33,9 +33,9 @@ if (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__) {
             replacer: (key, value) => {
                 // eslint-disable-next-line default-case
                 switch (true) {
-                    case isElement__default['default'](value):
+                    case isElement__default["default"](value):
                         return elementReplacer(value);
-                    case startsWith__default['default']('_reactInternal', `${key}`):
+                    case startsWith__default["default"]('_reactInternal', `${key}`):
                         return '_reactInternal';
                 }
                 return value;
@@ -47,7 +47,7 @@ if (typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__) {
 const DISPATCH = 'DISPATCH';
 
 const middleware = ({ pickState } = {}) => (api) => (next) => {
-    const getState = pickState && pickState.length ? () => pick__default['default'](pickState, api.getState()) : api.getState;
+    const getState = pickState && pickState.length ? () => pick__default["default"](pickState, api.getState()) : api.getState;
     // TODO: типизировать message
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     devTools.subscribe((message) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/state",
-  "version": "1.8.5",
+  "version": "1.9.0",
   "description": "",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@tinkoff/react-hooks": "0.0.22",
     "@tinkoff/utils": "^2.1.2",
-    "@tramvai/types-actions-state-context": "1.8.5",
+    "@tramvai/types-actions-state-context": "1.9.0",
     "@types/hoist-non-react-statics": "^3.3.1",
     "invariant": "^2.2.4",
     "react-is": "^17.0.1",