@tramvai/state 2.72.0 → 2.72.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -55
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,29 +1,6 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @tramvai/state
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
## Peculiarities
|
|
6
|
-
|
|
7
|
-
- Redux-like state manager
|
|
8
|
-
- Built-in library similar to [redux-act](https://github.com/pauldijou/redux-act) to reduce boilerplate code
|
|
9
|
-
- Contains bindings to `react` components such as `connect` and `useSelector`
|
|
10
|
-
- Dynamic initialization of reducers. You can register a reducer at any time or generate a new one.
|
|
11
|
-
- Point subscriptions to changes in the states of reducers. When data changes, only the affected `connect` and `useSelector` are recalculated, not everything.
|
|
12
|
-
- Support for SSR mode.
|
|
13
|
-
|
|
14
|
-
## Basic concepts
|
|
15
|
-
|
|
16
|
-
- Store - A class that contains the state of all reducers, change subscriptions and is created for each client
|
|
17
|
-
- Reducers - entities in which we describe how data will be stored and transformed
|
|
18
|
-
- Events - events with which you can change the states of reducers
|
|
19
|
-
- Actions - functions that allow you to perform side effects and update data in the store. Similar to `redux-thunk`
|
|
20
|
-
|
|
21
|
-
## Recommendations
|
|
22
|
-
|
|
23
|
-
- You cannot mutate data in reducers. Otherwise, due to various optimizations, subscribers will not be notified about the changes.
|
|
24
|
-
- 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.
|
|
25
|
-
- 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.
|
|
26
|
-
- 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.
|
|
3
|
+
`@tramvai/state` is a library built into `tramvai` for managing application state.
|
|
27
4
|
|
|
28
5
|
## Installation
|
|
29
6
|
|
|
@@ -33,33 +10,4 @@ npm i --save @tramvai/state
|
|
|
33
10
|
|
|
34
11
|
## Explanation
|
|
35
12
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
Some of the functions that deals with state (e.g. connect, useStoreSelector) will use some sort of batching (using requestAnimationFrame or SetTimeout) in browser. So any updates to state are not synchronous and happens after some time.
|
|
39
|
-
|
|
40
|
-
Most of the time this is not an issue or noticeable thing. But in tests that might be unexpected.
|
|
41
|
-
|
|
42
|
-
> 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)
|
|
43
|
-
|
|
44
|
-
## How to
|
|
45
|
-
|
|
46
|
-
### Basic example
|
|
47
|
-
|
|
48
|
-
```tsx
|
|
49
|
-
import { createReducer, createEvent } from '@tramvai/state';
|
|
50
|
-
|
|
51
|
-
export const userLoadInformation = createEvent('user load information');
|
|
52
|
-
export const userAddInformation = createEvent('user add information');
|
|
53
|
-
|
|
54
|
-
const userReducer = createReducer('user', {
|
|
55
|
-
info: {},
|
|
56
|
-
})
|
|
57
|
-
.on(userLoadInformation, (state, info) => ({ info }))
|
|
58
|
-
.on(userAddInformation, (state, { name, info }) => ({
|
|
59
|
-
...state,
|
|
60
|
-
state: {
|
|
61
|
-
...state.info,
|
|
62
|
-
[name]: info,
|
|
63
|
-
},
|
|
64
|
-
}));
|
|
65
|
-
```
|
|
13
|
+
Complete documentation is available in [State Management](03-features/08-state-management.md) guide.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tramvai/state",
|
|
3
|
-
"version": "2.72.
|
|
3
|
+
"version": "2.72.4",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"typings": "lib/index.d.ts",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@tinkoff/react-hooks": "0.1.5",
|
|
21
21
|
"@tinkoff/utils": "^2.1.2",
|
|
22
|
-
"@tramvai/types-actions-state-context": "2.72.
|
|
22
|
+
"@tramvai/types-actions-state-context": "2.72.4",
|
|
23
23
|
"@types/hoist-non-react-statics": "^3.3.1",
|
|
24
24
|
"invariant": "^2.2.4",
|
|
25
25
|
"react-is": ">=17",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@reatom/core": "^1.1.5",
|
|
37
|
-
"@tramvai/core": "2.72.
|
|
37
|
+
"@tramvai/core": "2.72.4",
|
|
38
38
|
"@types/invariant": "^2.2.31",
|
|
39
39
|
"@types/react-is": "^17.0.0",
|
|
40
40
|
"@types/use-sync-external-store": "^0.0.3",
|