@tramvai/state 1.58.0 → 1.60.2

package/README.md

@@ -39,7 +39,7 @@ Some of the functions that deals with state (e.g. connect, useStoreSelector) wil
 
 Most of the time this is not an issue or noticeable thing. But in tests that might be unexpected.
 
-> In order to take into account scheduling while testing use [waitRaf helper](references/test/test-jsdom.md#waitraf) or [act from test-unit](references/test/test-unit.md#act)
+> In order to take into account scheduling while testing use [waitRaf helper](references/tramvai/test/jsdom.md#waitraf) or [act from test-unit](references/tramvai/test/unit.md#act)
 
 ## How to
 

package/package.json

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

package/lib/connect/README.md

@@ -1,24 +0,0 @@
-# Connect
-
-Обновленная версия connect основанная на реализации из [react-redux](https://github.com/reactjs/react-redux/tree/a5e45d9806492d0fe1354437111722cf15b17b4d/src).
-Предыдущую версию можно найти в `../connectOld.js`
-
-Дока для версии react-redux [тут](https://github.com/reactjs/react-redux/blob/a5e45d9806492d0fe1354437111722cf15b17b4d/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)
-Но есть важные отличия в реализации (из-за архитектурных отличий от redux и для совместимости со старой версией connect):
-
-1. Отличия в работе connectAdvanced:
-    * добавлена опция stores со списком сторов для подписки
-    * работа со сторами осуществляется исключительно через Subscription
-    * убрана логика с использованием React.Context и заменена на работу с платформенным контекстом
-    * добавлена опция debug для добавления пропсов __renderCount__ и __subscription__
-    * из старой реализации перенесена логика с опциями hoistingProperties и hoistPropertiesOnlyOnce для поднятия свойств оборачиваемого компонента в обертку
-1. Сильно изменена логика работы Subscription:
-    * изменен способ подписки согласно ахитектуре платформы
-    * убрана ненужная логика с вложенными подписками
-    * теперь подписка хранит стейты всех сторов на которые подписана
-1. mapDispatchToProps изменен на mapContextToProps и принимает context первым параметром (если параметр опущен, то по умолчанию mapContextToProps возвращает пустой объект)
-1. для mapStateToProps теперь дефолтное поведение это вернуть весь стейт подписки, а не пустой объект
-1. внутри SelectorFactory mapStateToProps и mapContextToProps теперь вторым параметром принимают не просто ownProps, а смерженые пропсы с дефолтными значениями для компонента ({...WrappedComponent.defaultProps, ...ownProps}).
-Также в деве включена проверка, чтобы mapStateToProps на вызовы с одинаковыми параметрами возвращала shallowEqual значения
-1. в index.js теперь принимает первым параметром сторы для пописки и изменена проверка shouldHandleStateChanges для проверки надо ли создавать подписку - теперь подписка создается если переданы какие-то сторы (в react-redux если задан mapStateToProps)
-

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

@@ -1,135 +0,0 @@
-# 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/connect/hooks/README.md

@@ -1,135 +0,0 @@
-# State hooks
-
-## useActions
-
-Позволяет исполнять трамвайные [экшены](concepts/action.md) в React компонентах
-
-### Интерфейс
-
-- `actions` - один или массив трамвайных экшенов
-
-> Если передавать в `useActions` массив, для типизации требуется указать `as const` - `useActions([] as const)`
-
-### Использование
-
-```tsx
-import { useActions } from '@tramvai/state';
-import { loadUserAction, getInformationAction, setInformationAction } from './actions';
-
-export const Component = () => {
-  // если передавать один экшен, тип payload для loadUser выводится автоматически
-  const loadUser = useActions(loadUserAction);
-
-  // если передавать список экшенов, `as const` необходим для корректного вывода типов
-  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()
-
-Получение данных со стора в компонентах
-
-### Интерфейс
-
-- `stores: []` - список токенов на которые будет подписан селектор. Будет влиять на то, какие изменения в сторах вызовут обновление в компоненте
-- `selector: (state) => any` - сам селектор, это функция, которая будет вызвана при инициализации и любых изменениях сторов переданных в `stores`. Функция должна вернуть данные которые можно будет использовать в компоненте
-- `equalityFn?: (cur, prev) => boolean` - не обязательная функция для изменения способа сравнения прошлых и новых значений селектора
-
-### Использование
-
-Для получения данных из стора, можно использовать имя стора, ссылку на стор, или объект с опциональным стором:
-
-- `'storeName'`
-- `storeObject`
-- `{ store: storeObject, optional: true }`
-- `{ store: 'storeName', optional: true }`
-
-Можно передавать массив ключей, тогда для корректного вывода типов лучше использовать `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>;
-};
-```
-
-### Оптимизации
-
-Для того, чтобы уменьшить количество перерисовок компонентов после каждого вызова `selector` проверяются возвращаемые значения с теми, которые были раньше. Если возвращаемые данные селектора не изменились, то компонент не будет перерисован.
-
-По этой причине, в селекторах лучше получать небольшие куски информации. Тогда меньше шанс, что компонент обновится. К примеру: нам нужны `roles` пользователя, мы пишем селектор, который запрашивает все данные пользователя `(state) => state.user` и теперь любые изменения редьюсера `user` будут обновлять компонент. Лучше, если мы будем получать только необходимые данные `(state) => state.user.roles` в таком случае перерисовываться компонент будет только тогда, когда изменятся `roles` пользователя
-
-## useStoreSelector
-
-Упрощенная версия хука useSelector, в который можно передать только один стор, созданный через createReducer. Сделан был для улучшения вывода типов селекторов, так как сам useSelector не может этого делать из-за использования внутри строковых имен сторов, токенов и наследников BaseStore
-
-### Интерфейс
-
-- `store: Reducer` - Стор, созданный через createReducer
-- `selector: (state) => any` - сам селектор, это функция, которая будет вызвана при инициализации и любых изменениях стора, переданного в `stores`. Функция должна вернуть данные которые можно будет использовать в компоненте
-
-### Использование
-
-```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)); // Корректно выведется тип id как "string"
-
-  return <div>{id}</div>;
-};
-```
-
-### Оптимизации
-
-Хук является оберткой над useSelector, поэтому оптимизации аналогичны. Сама функция селектора внутри мемоизируется
-
-## useStore
-
-Хук для получения состояния конкретного редьюсера.
-
-Особенности:
-
-- автоматически выводит тип состояния
-- перерендеривает компонент только при обновлении редьюсера
-- позволяет создавать редьюсеры "на лету"
-
-### Интерфейс
-
-- `store: Reducer` - Стор, созданный через createReducer
-
-### Использование
-
-Базовый пример:
-
-```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

@@ -1,63 +0,0 @@
-# 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/createEvent/README.md

@@ -1,63 +0,0 @@
-# createEvent
-
-Метод `createEvent` создает событие, на которое можно будет подписаться в state management
-
-## Описание метода
-
-`createEvent(eventName: string, payloadCreator?: PayloadTransformer): EventCreator`
-
-- `eventName` - Уникальные индетификатор события
-- `payloadCreator` - не обязательная функция, которая позволяет объединять множество аргументов в один, В случаях, когда эвент был вызван с множеством аргументов.
-
-## Примеры
-
-#### Создание эвента без параметров
-
-```tsx
-import { createEvent } from '@tramvai/state';
-
-const userLoadingInformation = createEvent('user loading information');
-
-userLoadingInformation();
-```
-
-#### Создание эвента с параметрами
-
-```tsx
-import { createEvent } from '@tramvai/state';
-
-const userInformation = createEvent<{ age: number; name: string }>('user information');
-
-userInformation({ age: 42, name: 'Tom' });
-```
-
-#### Создание эвента с преобразование payload
-
-```tsx
-import { createEvent } from '@tramvai/state';
-
-const itemPrice = createEvent('user information', (info: string, price: number) => ({
-  [info]: price,
-}));
-
-itemPrice('car', 3000);
-```
-
-#### Использование эвентов в экшенах
-
-Мы создаем экшен, в котором после загрузки информации, создаем эвент и кидаем его в 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

@@ -1,101 +0,0 @@
-# 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/createReducer/README.md

@@ -1,101 +0,0 @@
-# createReducer
-
-Метод `createReducer` создает функции - редьюсеры, которые описывают состояние при инициализации и реакцию на изменение состояния.
-
-Принцип работы и api строится на основе: https://redux.js.org/basics/reducers и интерфейса использования из https://github.com/pauldijou/redux-act#createreducerhandlers-defaultstate
-
-### Описание метода
-
-`createReducer(name, initialState)`
-
-- `name` - уникальное название редьюсера. Не должно пересекаться с другими редьюсерами
-- `initialState` - состояние редьюсера по умолчанию
-
-### Типизация
-
-По умолчанию, тип стейта редьюсера, и его название, выводятся автоматически:
-
-```tsx
-import { createReducer } from '@tramvai/state';
-
-const userReducer = createReducer('user', { name: 'anonymus' });
-```
-
-Зачем вообще нужна типизация для названия редьюсера?
-Тогда этот редьюсер будет удобнее использовать вместе с `useSelector`.
-
-Если передавать тип стейта вручную, желательно указать и название вторым аргументом дженерика:
-
-```tsx
-import { createReducer } from '@tramvai/state';
-
-type UserState = { name: string };
-
-const userReducer = createReducer<UserState, 'user'>('user', { name: 'anonymus' });
-```
-
-Но, можно просто задать нужный тип для `initialState`:
-
-```tsx
-import { createReducer } from '@tramvai/state';
-
-type UserState = { name?: string };
-
-const userReducer = createReducer('user', {} as UserState);
-```
-
-### Подписка на эвенты
-
-`.on(evnet, reducer)` При создании редьюсера становится доступным метод .on который позволяет подписаться на события и вернуть новый стейт
-
-- `event` - эвент или строка, на которые будет подписан редьюсер
-- `reducer(state, payload)` - чистая функция которая принимает текущий `state`, `payload` из события и должен вернуть новое состояние редьюсера
-
-**_Пример использования `.on` метода_**
-
-```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,
-    },
-  }));
-```
-
-### Автоматическое создание эвентов
-
-`.createEvents(model)` метод который позволяет убрать необходимость в создании и явном привязывании эвентов
-
-- `model` - объект, в котором ключ это идентификатор эвента, который потом будет передан в `createEvent`, а значение это функция редьюсера, которая попадет в метод `.on()` и будет вызываться при срабатывании эвентов
-
-**_Пример использования `.createEvents` метода_**
-
-```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,
-    },
-  }),
-});
-```
-
-Обязательно необходимо описать типы `payload` аргумента в редьюсерах, иначе не будет работать вывод типов для эвентов.

package/lib/devTools/README.en.md

@@ -1,24 +0,0 @@
-# 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/devTools/README.md

@@ -1,24 +0,0 @@
-# Redux devtools
-
-Для включения devtools необходимо выполнить:
-
-- Установить расширение в браузере: [расширение для Chrome](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) или [расширение для FireFox](https://addons.mozilla.org/en-US/firefox/addon/reduxdevtools/)
-- Открыть страницу на `tramvai` и открыть расширение кликом на иконку Redux devtools
-
-![Redux devtools](https://cloud.githubusercontent.com/assets/7957859/18002950/aacb82fc-6b93-11e6-9ae9-609862c18302.png)
-
-### Возможные проблемы
-
-1. Для лучшего пользовательского опыта необходимо использовать отдельное окно расширения redux dev tools, а не вкладку в chrome developer tools, т.к. иначе не сохраняется история экшнов [issue](https://github.com/zalmoxisus/redux-devtools-extension/issues/505).
-
-### Производительность
-
-Так как весь стейт приложения со всеми экшенами довольно большой, то наблюдаются ощутимые тормоза при работе с девтулз при использовании прыжков по состояниям\событиям и при одновременном срабатывании большого количества экшнов. Поэтому:
-
-1. Используйте техники кастомизации для задания pickState для уменьшения размера данных в девтулзах.
-1. Увеличьте значение параметра latency (передается в connectViaExtension.connect), который по сути делает debounce на посылку actions в расширение [docs](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#latency)
-
-### Дополнительный материал
-
-- [Репозиторий с devtools](https://github.com/zalmoxisus/redux-devtools-extension)
-- [Getting Started with Redux DevTools Extension ](https://egghead.io/lessons/javascript-getting-started-with-redux-dev-tools)