@genesislcap/foundation-redux 14.408.0 → 14.409.0
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 +5 -165
- package/package.json +11 -11
- package/docs/api/foundation-redux.actionsfromslices.md +0 -36
- package/docs/api/foundation-redux.createstore.md +0 -89
- package/docs/api/foundation-redux.md +0 -139
- package/docs/api/foundation-redux.rootstatefromslices.md +0 -32
- package/docs/api/foundation-redux.selectorsfromslices.md +0 -40
- package/docs/api/foundation-redux.slice.actions.md +0 -13
- package/docs/api/foundation-redux.slice.md +0 -131
- package/docs/api/foundation-redux.slice.name.md +0 -13
- package/docs/api/foundation-redux.slice.reducer.md +0 -13
- package/docs/api/foundation-redux.slice.selectors.md +0 -13
- package/docs/api/foundation-redux.slicearray.md +0 -27
- package/docs/api/foundation-redux.storereturn.md +0 -37
- package/docs/api/foundation-redux.thunkdispatch.md +0 -28
- package/docs/api/index.md +0 -30
- package/docs/api-report.md.api.md +0 -89
package/README.md
CHANGED
|
@@ -1,185 +1,25 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @genesislcap/foundation-redux
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
[](https://www.typescriptlang.org/)
|
|
3
|
+
Documentation for this package is published on the Genesis docs site:
|
|
5
4
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
`foundation-redux` provides Redux Toolkit integration for Genesis components, offering a clean and efficient way to manage application state using the proven Redux pattern.
|
|
9
|
-
|
|
10
|
-
## Background
|
|
11
|
-
|
|
12
|
-
This package was created to provide an alternative to `foundation-store` by leveraging the power and ecosystem of Redux Toolkit. While `foundation-store` implements a Redux-like pattern within the Genesis context, `foundation-redux` provides direct bindings to Redux itself, allowing developers to benefit from:
|
|
13
|
-
|
|
14
|
-
- Vast Redux documentation and ecosystem
|
|
15
|
-
- Redux DevTools integration
|
|
16
|
-
- Proven patterns and best practices
|
|
17
|
-
- Extensive community support
|
|
18
|
-
- Built-in immutability handling
|
|
19
|
-
|
|
20
|
-
## Why Choose foundation-redux over foundation-store?
|
|
21
|
-
|
|
22
|
-
### Reduced Boilerplate
|
|
23
|
-
Foundation store requires manual immutability handling and custom event setup, while Redux Toolkit handles immutability automatically.
|
|
24
|
-
|
|
25
|
-
**Foundation store example:**
|
|
26
|
-
```typescript
|
|
27
|
-
this.createListener<DeleteViewDerivedFieldPayload>(
|
|
28
|
-
StoreEvents.DeleteViewDerivedField,
|
|
29
|
-
({ view, field }) => {
|
|
30
|
-
const { [field]: fieldToDelete, ...rest } =
|
|
31
|
-
this.commit.genesisCreateConfig.views.views[view]?.derivedFields || {};
|
|
32
|
-
if (fieldToDelete) {
|
|
33
|
-
this.commit.genesisCreateConfig = {
|
|
34
|
-
...this.genesisCreateConfig,
|
|
35
|
-
views: {
|
|
36
|
-
views: {
|
|
37
|
-
...this.genesisCreateConfig.views.views,
|
|
38
|
-
[view]: {
|
|
39
|
-
...this.genesisCreateConfig.views.views[view],
|
|
40
|
-
derivedFields: {
|
|
41
|
-
...rest,
|
|
42
|
-
},
|
|
43
|
-
},
|
|
44
|
-
},
|
|
45
|
-
},
|
|
46
|
-
};
|
|
47
|
-
}
|
|
48
|
-
},
|
|
49
|
-
);
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
**Redux Toolkit example:**
|
|
53
|
-
```typescript
|
|
54
|
-
deleteDerivedField(state, { payload: { view, field } }) {
|
|
55
|
-
delete state[view].derivedFields[field];
|
|
56
|
-
}
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
### Ecosystem Benefits
|
|
60
|
-
- **Redux DevTools**: Built-in debugging and time-travel debugging
|
|
61
|
-
- **Middleware**: Extensive middleware ecosystem
|
|
62
|
-
- **Entity Adapters**: Auto-generated CRUD actions and selectors
|
|
63
|
-
- **Serialization**: Built-in support for local storage and hydration
|
|
5
|
+
**Docs: [Foundation Redux](https://docs.genesis.global/docs/develop/client-capabilities/state-management/foundation-redux/)**
|
|
64
6
|
|
|
65
7
|
## Installation
|
|
66
8
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
1. Add `@genesislcap/foundation-redux` as a dependency in your `package.json` file. Whenever you change the dependencies of your project, ensure you run the `$ npm run bootstrap` command again.
|
|
9
|
+
Add the package to your `package.json` dependencies. After changing dependencies, run `npm run bootstrap` (or your project's equivalent). See [package.json basics](https://learn.genesis.global/secure/web/basics/package-json-basics/) for more information.
|
|
70
10
|
|
|
71
11
|
```json
|
|
72
12
|
{
|
|
73
|
-
...
|
|
74
13
|
"dependencies": {
|
|
75
|
-
...
|
|
76
14
|
"@genesislcap/foundation-redux": "latest"
|
|
77
|
-
...
|
|
78
|
-
},
|
|
79
|
-
...
|
|
80
|
-
}
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
## Usage
|
|
84
|
-
|
|
85
|
-
### Basic Store Setup
|
|
86
|
-
|
|
87
|
-
```typescript
|
|
88
|
-
import { createStore } from '@genesislcap/foundation-redux';
|
|
89
|
-
import { createSlice } from '@reduxjs/toolkit';
|
|
90
|
-
import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
|
|
91
|
-
|
|
92
|
-
// Define your slices
|
|
93
|
-
const userSlice = createSlice({
|
|
94
|
-
name: 'user',
|
|
95
|
-
initialState: { name: '', email: '' },
|
|
96
|
-
reducers: {
|
|
97
|
-
setUser: (state, action) => {
|
|
98
|
-
state.name = action.payload.name;
|
|
99
|
-
state.email = action.payload.email;
|
|
100
|
-
},
|
|
101
|
-
clearUser: (state) => {
|
|
102
|
-
state.name = '';
|
|
103
|
-
state.email = '';
|
|
104
|
-
},
|
|
105
|
-
},
|
|
106
|
-
selectors: {
|
|
107
|
-
getUserName: (state) => state.name,
|
|
108
|
-
getUserEmail: (state) => state.email,
|
|
109
|
-
},
|
|
110
|
-
});
|
|
111
|
-
|
|
112
|
-
// Create the store
|
|
113
|
-
const { store, actions, selectors } = createStore([userSlice], {});
|
|
114
|
-
|
|
115
|
-
@customElement({
|
|
116
|
-
name: 'user-component',
|
|
117
|
-
template: html`<div>Hello ${(x) => x.userName}!</div>`,
|
|
118
|
-
})
|
|
119
|
-
export class UserComponent extends GenesisElement {
|
|
120
|
-
@observable userName = '';
|
|
121
|
-
|
|
122
|
-
connectedCallback() {
|
|
123
|
-
super.connectedCallback();
|
|
124
|
-
|
|
125
|
-
// Subscribe to store changes
|
|
126
|
-
store.subscribeKey(
|
|
127
|
-
(state) => state.user.name,
|
|
128
|
-
(state) => {
|
|
129
|
-
this.userName = state.user.name;
|
|
130
|
-
}
|
|
131
|
-
);
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
handleLogin() {
|
|
135
|
-
actions.user.setUser({ name: 'John Doe', email: 'john@example.com' });
|
|
136
15
|
}
|
|
137
16
|
}
|
|
138
17
|
```
|
|
139
18
|
|
|
140
|
-
### Advanced Features
|
|
141
|
-
|
|
142
|
-
- **Thunk Actions**: Support for async operations
|
|
143
|
-
- **Entity Adapters**: Auto-generated CRUD operations
|
|
144
|
-
- **DevTools**: Full Redux DevTools integration
|
|
145
|
-
- **Middleware**: Custom middleware support
|
|
146
|
-
- **Local Storage**: Built-in persistence helpers
|
|
147
|
-
|
|
148
|
-
## API Reference
|
|
149
|
-
|
|
150
|
-
### `createStore(slices, preloadedState)`
|
|
151
|
-
|
|
152
|
-
Creates a Redux store with Genesis component integration.
|
|
153
|
-
|
|
154
|
-
**Parameters:**
|
|
155
|
-
- `slices`: Array of Redux Toolkit slices
|
|
156
|
-
- `preloadedState`: Initial state for the store
|
|
157
|
-
|
|
158
|
-
**Returns:**
|
|
159
|
-
- `store`: Proxied state object for reactive updates
|
|
160
|
-
- `actions`: Bound action creators
|
|
161
|
-
- `selectors`: Bound selectors
|
|
162
|
-
- `dispatch`: Redux dispatch function
|
|
163
|
-
- `subscribe`: Store subscription function
|
|
164
|
-
- `subscribeKey`: Key-based subscription for performance
|
|
165
|
-
- `notify`: Manual notification trigger
|
|
166
|
-
|
|
167
|
-
### Store Integration
|
|
168
|
-
|
|
169
|
-
The store automatically integrates with Genesis's Observable system, providing reactive updates when state changes. Components can subscribe to specific state changes using `subscribeKey` for optimal performance.
|
|
170
|
-
|
|
171
|
-
## Migration from foundation-store
|
|
172
|
-
|
|
173
|
-
If you're currently using `foundation-store`, migration to `foundation-redux` involves:
|
|
174
|
-
|
|
175
|
-
1. **Replace store creation**: Use `createStore` instead of store fragments
|
|
176
|
-
2. **Convert event handlers**: Replace custom events with Redux actions
|
|
177
|
-
3. **Update subscriptions**: Use `subscribeKey` instead of binding observers
|
|
178
|
-
4. **Simplify state updates**: Let Redux Toolkit handle immutability
|
|
179
|
-
|
|
180
19
|
## License
|
|
181
20
|
|
|
182
21
|
Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.
|
|
183
22
|
|
|
184
23
|
### Licensed components
|
|
24
|
+
|
|
185
25
|
Genesis low-code platform
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genesislcap/foundation-redux",
|
|
3
3
|
"description": "Genesis Foundation Redux - Redux Toolkit integration for FAST components",
|
|
4
|
-
"version": "14.
|
|
4
|
+
"version": "14.409.0",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "SEE LICENSE IN license.txt",
|
|
7
7
|
"main": "dist/esm/index.js",
|
|
@@ -38,17 +38,17 @@
|
|
|
38
38
|
}
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@genesislcap/foundation-testing": "14.
|
|
42
|
-
"@genesislcap/genx": "14.
|
|
43
|
-
"@genesislcap/rollup-builder": "14.
|
|
44
|
-
"@genesislcap/ts-builder": "14.
|
|
45
|
-
"@genesislcap/uvu-playwright-builder": "14.
|
|
46
|
-
"@genesislcap/vite-builder": "14.
|
|
47
|
-
"@genesislcap/webpack-builder": "14.
|
|
41
|
+
"@genesislcap/foundation-testing": "14.409.0",
|
|
42
|
+
"@genesislcap/genx": "14.409.0",
|
|
43
|
+
"@genesislcap/rollup-builder": "14.409.0",
|
|
44
|
+
"@genesislcap/ts-builder": "14.409.0",
|
|
45
|
+
"@genesislcap/uvu-playwright-builder": "14.409.0",
|
|
46
|
+
"@genesislcap/vite-builder": "14.409.0",
|
|
47
|
+
"@genesislcap/webpack-builder": "14.409.0"
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@genesislcap/foundation-utils": "14.
|
|
51
|
-
"@genesislcap/web-core": "14.
|
|
50
|
+
"@genesislcap/foundation-utils": "14.409.0",
|
|
51
|
+
"@genesislcap/web-core": "14.409.0",
|
|
52
52
|
"@reduxjs/toolkit": "^2.2.5"
|
|
53
53
|
},
|
|
54
54
|
"repository": {
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"publishConfig": {
|
|
60
60
|
"access": "public"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "cbe0459d170f27c35a7de18cec415947aedf4da5"
|
|
63
63
|
}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@genesislcap/foundation-redux](./foundation-redux.md) > [ActionsFromSlices](./foundation-redux.actionsfromslices.md)
|
|
4
|
-
|
|
5
|
-
## ActionsFromSlices type
|
|
6
|
-
|
|
7
|
-
Extracts the bound actions type from an array of slices.
|
|
8
|
-
|
|
9
|
-
**Signature:**
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
export type ActionsFromSlices<S extends SliceArray> = {
|
|
13
|
-
[K in S[number]['name']]: {
|
|
14
|
-
[ActionKey in keyof Extract<S[number], {
|
|
15
|
-
name: K;
|
|
16
|
-
}>['actions']]: (payload: FirstParameter<Extract<S[number], {
|
|
17
|
-
name: K;
|
|
18
|
-
}>['actions'][ActionKey]>) => void;
|
|
19
|
-
};
|
|
20
|
-
};
|
|
21
|
-
```
|
|
22
|
-
**References:** [SliceArray](./foundation-redux.slicearray.md)
|
|
23
|
-
|
|
24
|
-
## Remarks
|
|
25
|
-
|
|
26
|
-
This utility type creates a nested object structure where each slice name maps to its actions. Actions are bound to the store and automatically dispatch when called.
|
|
27
|
-
|
|
28
|
-
## Example
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
```typescript
|
|
32
|
-
const { actions } = createStore([userSlice, cartSlice], initialState);
|
|
33
|
-
// actions.user.setUser({ name: 'John' })
|
|
34
|
-
// actions.cart.addItem({ id: 'item1', quantity: 1 })
|
|
35
|
-
```
|
|
36
|
-
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@genesislcap/foundation-redux](./foundation-redux.md) > [createStore](./foundation-redux.createstore.md)
|
|
4
|
-
|
|
5
|
-
## createStore() function
|
|
6
|
-
|
|
7
|
-
Creates a Redux store with FAST component integration.
|
|
8
|
-
|
|
9
|
-
**Signature:**
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
createStore: <S extends SliceArray>(slices: S, preloadedState: RootStateFromSlices<S>) => StoreReturn<S>
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## Parameters
|
|
16
|
-
|
|
17
|
-
<table><thead><tr><th>
|
|
18
|
-
|
|
19
|
-
Parameter
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
</th><th>
|
|
23
|
-
|
|
24
|
-
Type
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
</th><th>
|
|
28
|
-
|
|
29
|
-
Description
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
</th></tr></thead>
|
|
33
|
-
<tbody><tr><td>
|
|
34
|
-
|
|
35
|
-
slices
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
</td><td>
|
|
39
|
-
|
|
40
|
-
S
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
</td><td>
|
|
44
|
-
|
|
45
|
-
Array of slices to combine into the store
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
</td></tr>
|
|
49
|
-
<tr><td>
|
|
50
|
-
|
|
51
|
-
preloadedState
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
</td><td>
|
|
55
|
-
|
|
56
|
-
[RootStateFromSlices](./foundation-redux.rootstatefromslices.md)<!-- --><S>
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
</td><td>
|
|
60
|
-
|
|
61
|
-
Initial state that matches the slice structure
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
</td></tr>
|
|
65
|
-
</tbody></table>
|
|
66
|
-
|
|
67
|
-
**Returns:**
|
|
68
|
-
|
|
69
|
-
[StoreReturn](./foundation-redux.storereturn.md)<!-- --><S>
|
|
70
|
-
|
|
71
|
-
Object containing store, actions, selectors, and utility functions
|
|
72
|
-
|
|
73
|
-
## Remarks
|
|
74
|
-
|
|
75
|
-
This function creates a Redux store that integrates seamlessly with FAST components. It automatically binds actions and selectors, provides subscription methods, and handles FAST Observable notifications.
|
|
76
|
-
|
|
77
|
-
## Example
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
```typescript
|
|
81
|
-
const { store, actions, selectors, subscribeKey } = createStore(
|
|
82
|
-
[userSlice, cartSlice],
|
|
83
|
-
{
|
|
84
|
-
user: { name: '', email: '' },
|
|
85
|
-
cart: { items: [], total: 0 }
|
|
86
|
-
}
|
|
87
|
-
);
|
|
88
|
-
```
|
|
89
|
-
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@genesislcap/foundation-redux](./foundation-redux.md)
|
|
4
|
-
|
|
5
|
-
## foundation-redux package
|
|
6
|
-
|
|
7
|
-
## Functions
|
|
8
|
-
|
|
9
|
-
<table><thead><tr><th>
|
|
10
|
-
|
|
11
|
-
Function
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
</th><th>
|
|
15
|
-
|
|
16
|
-
Description
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
</th></tr></thead>
|
|
20
|
-
<tbody><tr><td>
|
|
21
|
-
|
|
22
|
-
[createStore(slices, preloadedState)](./foundation-redux.createstore.md)
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
</td><td>
|
|
26
|
-
|
|
27
|
-
Creates a Redux store with FAST component integration.
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
</td></tr>
|
|
31
|
-
</tbody></table>
|
|
32
|
-
|
|
33
|
-
## Interfaces
|
|
34
|
-
|
|
35
|
-
<table><thead><tr><th>
|
|
36
|
-
|
|
37
|
-
Interface
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
</th><th>
|
|
41
|
-
|
|
42
|
-
Description
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
</th></tr></thead>
|
|
46
|
-
<tbody><tr><td>
|
|
47
|
-
|
|
48
|
-
[Slice](./foundation-redux.slice.md)
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
</td><td>
|
|
52
|
-
|
|
53
|
-
Represents a Redux slice with actions and selectors.
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
</td></tr>
|
|
57
|
-
</tbody></table>
|
|
58
|
-
|
|
59
|
-
## Type Aliases
|
|
60
|
-
|
|
61
|
-
<table><thead><tr><th>
|
|
62
|
-
|
|
63
|
-
Type Alias
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
</th><th>
|
|
67
|
-
|
|
68
|
-
Description
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
</th></tr></thead>
|
|
72
|
-
<tbody><tr><td>
|
|
73
|
-
|
|
74
|
-
[ActionsFromSlices](./foundation-redux.actionsfromslices.md)
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
</td><td>
|
|
78
|
-
|
|
79
|
-
Extracts the bound actions type from an array of slices.
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
</td></tr>
|
|
83
|
-
<tr><td>
|
|
84
|
-
|
|
85
|
-
[RootStateFromSlices](./foundation-redux.rootstatefromslices.md)
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
</td><td>
|
|
89
|
-
|
|
90
|
-
Extracts the root state type from an array of slices.
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
</td></tr>
|
|
94
|
-
<tr><td>
|
|
95
|
-
|
|
96
|
-
[SelectorsFromSlices](./foundation-redux.selectorsfromslices.md)
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
</td><td>
|
|
100
|
-
|
|
101
|
-
Extracts the bound selectors type from an array of slices.
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
</td></tr>
|
|
105
|
-
<tr><td>
|
|
106
|
-
|
|
107
|
-
[SliceArray](./foundation-redux.slicearray.md)
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
</td><td>
|
|
111
|
-
|
|
112
|
-
An array of slices that will be combined into a single store.
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
</td></tr>
|
|
116
|
-
<tr><td>
|
|
117
|
-
|
|
118
|
-
[StoreReturn](./foundation-redux.storereturn.md)
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
</td><td>
|
|
122
|
-
|
|
123
|
-
The return type of the createStore function.
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
</td></tr>
|
|
127
|
-
<tr><td>
|
|
128
|
-
|
|
129
|
-
[ThunkDispatch](./foundation-redux.thunkdispatch.md)
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
</td><td>
|
|
133
|
-
|
|
134
|
-
Type for thunk actions that can be dispatched to the store.
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
</td></tr>
|
|
138
|
-
</tbody></table>
|
|
139
|
-
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@genesislcap/foundation-redux](./foundation-redux.md) > [RootStateFromSlices](./foundation-redux.rootstatefromslices.md)
|
|
4
|
-
|
|
5
|
-
## RootStateFromSlices type
|
|
6
|
-
|
|
7
|
-
Extracts the root state type from an array of slices.
|
|
8
|
-
|
|
9
|
-
**Signature:**
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
export type RootStateFromSlices<S extends SliceArray> = {
|
|
13
|
-
[K in S[number]['name']]: Extract<S[number], {
|
|
14
|
-
name: K;
|
|
15
|
-
}> extends Slice<infer State> ? State : never;
|
|
16
|
-
};
|
|
17
|
-
```
|
|
18
|
-
**References:** [SliceArray](./foundation-redux.slicearray.md)<!-- -->, [Slice](./foundation-redux.slice.md)
|
|
19
|
-
|
|
20
|
-
## Remarks
|
|
21
|
-
|
|
22
|
-
This utility type maps over the slice names and extracts the state type for each slice. The resulting type represents the complete state structure of your Redux store.
|
|
23
|
-
|
|
24
|
-
## Example
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
```typescript
|
|
28
|
-
const slices = [userSlice, cartSlice];
|
|
29
|
-
type RootState = RootStateFromSlices<typeof slices>;
|
|
30
|
-
// Result: { user: UserState, cart: CartState }
|
|
31
|
-
```
|
|
32
|
-
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@genesislcap/foundation-redux](./foundation-redux.md) > [SelectorsFromSlices](./foundation-redux.selectorsfromslices.md)
|
|
4
|
-
|
|
5
|
-
## SelectorsFromSlices type
|
|
6
|
-
|
|
7
|
-
Extracts the bound selectors type from an array of slices.
|
|
8
|
-
|
|
9
|
-
**Signature:**
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
export type SelectorsFromSlices<S extends SliceArray> = {
|
|
13
|
-
[K in S[number]['name']]: {
|
|
14
|
-
[SelectorKey in keyof Extract<S[number], {
|
|
15
|
-
name: K;
|
|
16
|
-
}>['selectors']]: (...payload: RemoveFirstParameter<Extract<S[number], {
|
|
17
|
-
name: K;
|
|
18
|
-
}>['selectors'][SelectorKey]>) => ReturnType<Extract<S[number], {
|
|
19
|
-
name: K;
|
|
20
|
-
}>['selectors'][SelectorKey]> extends void ? any : ReturnType<Extract<S[number], {
|
|
21
|
-
name: K;
|
|
22
|
-
}>['selectors'][SelectorKey]>;
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
```
|
|
26
|
-
**References:** [SliceArray](./foundation-redux.slicearray.md)
|
|
27
|
-
|
|
28
|
-
## Remarks
|
|
29
|
-
|
|
30
|
-
This utility type creates a nested object structure where each slice name maps to its selectors. Selectors are bound to the store and can access the current state.
|
|
31
|
-
|
|
32
|
-
## Example
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
```typescript
|
|
36
|
-
const { selectors } = createStore([userSlice, cartSlice], initialState);
|
|
37
|
-
// const userName = selectors.user.getUserName()
|
|
38
|
-
// const cartTotal = selectors.cart.getTotal()
|
|
39
|
-
```
|
|
40
|
-
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@genesislcap/foundation-redux](./foundation-redux.md) > [Slice](./foundation-redux.slice.md) > [actions](./foundation-redux.slice.actions.md)
|
|
4
|
-
|
|
5
|
-
## Slice.actions property
|
|
6
|
-
|
|
7
|
-
Action creators for this slice
|
|
8
|
-
|
|
9
|
-
**Signature:**
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
actions: Record<string, (payload: any) => Action>;
|
|
13
|
-
```
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@genesislcap/foundation-redux](./foundation-redux.md) > [Slice](./foundation-redux.slice.md)
|
|
4
|
-
|
|
5
|
-
## Slice interface
|
|
6
|
-
|
|
7
|
-
Represents a Redux slice with actions and selectors.
|
|
8
|
-
|
|
9
|
-
**Signature:**
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
export interface Slice<State = any>
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## Remarks
|
|
16
|
-
|
|
17
|
-
A slice contains the reducer, actions, and selectors for a specific domain of your application state.
|
|
18
|
-
|
|
19
|
-
## Example
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
```typescript
|
|
23
|
-
const userSlice: Slice = {
|
|
24
|
-
name: 'user',
|
|
25
|
-
reducer: userReducer,
|
|
26
|
-
actions: { setUser, logout },
|
|
27
|
-
selectors: { getUser, isLoggedIn }
|
|
28
|
-
};
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
## Properties
|
|
32
|
-
|
|
33
|
-
<table><thead><tr><th>
|
|
34
|
-
|
|
35
|
-
Property
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
</th><th>
|
|
39
|
-
|
|
40
|
-
Modifiers
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
</th><th>
|
|
44
|
-
|
|
45
|
-
Type
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
</th><th>
|
|
49
|
-
|
|
50
|
-
Description
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
</th></tr></thead>
|
|
54
|
-
<tbody><tr><td>
|
|
55
|
-
|
|
56
|
-
[actions](./foundation-redux.slice.actions.md)
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
</td><td>
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
</td><td>
|
|
63
|
-
|
|
64
|
-
Record<string, (payload: any) => Action>
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
</td><td>
|
|
68
|
-
|
|
69
|
-
Action creators for this slice
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
</td></tr>
|
|
73
|
-
<tr><td>
|
|
74
|
-
|
|
75
|
-
[name](./foundation-redux.slice.name.md)
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
</td><td>
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
</td><td>
|
|
82
|
-
|
|
83
|
-
string
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
</td><td>
|
|
87
|
-
|
|
88
|
-
The unique name of the slice
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
</td></tr>
|
|
92
|
-
<tr><td>
|
|
93
|
-
|
|
94
|
-
[reducer](./foundation-redux.slice.reducer.md)
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
</td><td>
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
</td><td>
|
|
101
|
-
|
|
102
|
-
Reducer<State, Action>
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
</td><td>
|
|
106
|
-
|
|
107
|
-
The Redux reducer function for this slice
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
</td></tr>
|
|
111
|
-
<tr><td>
|
|
112
|
-
|
|
113
|
-
[selectors](./foundation-redux.slice.selectors.md)
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
</td><td>
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
</td><td>
|
|
120
|
-
|
|
121
|
-
Record<string, (...args: any\[\]) => any>
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
</td><td>
|
|
125
|
-
|
|
126
|
-
Selector functions for this slice
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
</td></tr>
|
|
130
|
-
</tbody></table>
|
|
131
|
-
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@genesislcap/foundation-redux](./foundation-redux.md) > [Slice](./foundation-redux.slice.md) > [name](./foundation-redux.slice.name.md)
|
|
4
|
-
|
|
5
|
-
## Slice.name property
|
|
6
|
-
|
|
7
|
-
The unique name of the slice
|
|
8
|
-
|
|
9
|
-
**Signature:**
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
name: string;
|
|
13
|
-
```
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@genesislcap/foundation-redux](./foundation-redux.md) > [Slice](./foundation-redux.slice.md) > [reducer](./foundation-redux.slice.reducer.md)
|
|
4
|
-
|
|
5
|
-
## Slice.reducer property
|
|
6
|
-
|
|
7
|
-
The Redux reducer function for this slice
|
|
8
|
-
|
|
9
|
-
**Signature:**
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
reducer: Reducer<State, Action>;
|
|
13
|
-
```
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@genesislcap/foundation-redux](./foundation-redux.md) > [Slice](./foundation-redux.slice.md) > [selectors](./foundation-redux.slice.selectors.md)
|
|
4
|
-
|
|
5
|
-
## Slice.selectors property
|
|
6
|
-
|
|
7
|
-
Selector functions for this slice
|
|
8
|
-
|
|
9
|
-
**Signature:**
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
selectors: Record<string, (...args: any[]) => any>;
|
|
13
|
-
```
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@genesislcap/foundation-redux](./foundation-redux.md) > [SliceArray](./foundation-redux.slicearray.md)
|
|
4
|
-
|
|
5
|
-
## SliceArray type
|
|
6
|
-
|
|
7
|
-
An array of slices that will be combined into a single store.
|
|
8
|
-
|
|
9
|
-
**Signature:**
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
export type SliceArray = Slice[];
|
|
13
|
-
```
|
|
14
|
-
**References:** [Slice](./foundation-redux.slice.md)
|
|
15
|
-
|
|
16
|
-
## Remarks
|
|
17
|
-
|
|
18
|
-
This type represents the collection of slices that will be used to create a Redux store. Each slice in the array will become a top-level key in the store's state.
|
|
19
|
-
|
|
20
|
-
## Example
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
```typescript
|
|
24
|
-
const slices: SliceArray = [userSlice, cartSlice, preferencesSlice];
|
|
25
|
-
const { store } = createStore(slices, initialState);
|
|
26
|
-
```
|
|
27
|
-
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@genesislcap/foundation-redux](./foundation-redux.md) > [StoreReturn](./foundation-redux.storereturn.md)
|
|
4
|
-
|
|
5
|
-
## StoreReturn type
|
|
6
|
-
|
|
7
|
-
The return type of the createStore function.
|
|
8
|
-
|
|
9
|
-
**Signature:**
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
export type StoreReturn<S extends SliceArray> = {
|
|
13
|
-
reduxStore: EnhancedStore<RootStateFromSlices<S>>;
|
|
14
|
-
store: RootStateFromSlices<S>;
|
|
15
|
-
actions: ActionsFromSlices<S>;
|
|
16
|
-
selectors: SelectorsFromSlices<S>;
|
|
17
|
-
rootReducer: ReducersMapObject<RootStateFromSlices<S>>;
|
|
18
|
-
subscribeKey: (checkerFn: (s: RootStateFromSlices<S>) => string, callbackFn: (s: RootStateFromSlices<S>) => void) => void;
|
|
19
|
-
dispatch: (action: Action | ThunkDispatch<S>) => void;
|
|
20
|
-
notify: (sliceName: keyof RootStateFromSlices<S>) => void;
|
|
21
|
-
subscribe: (cb: (state: RootStateFromSlices<S>) => void) => void;
|
|
22
|
-
getState: () => RootStateFromSlices<S>;
|
|
23
|
-
};
|
|
24
|
-
```
|
|
25
|
-
**References:** [SliceArray](./foundation-redux.slicearray.md)<!-- -->, [RootStateFromSlices](./foundation-redux.rootstatefromslices.md)<!-- -->, [ActionsFromSlices](./foundation-redux.actionsfromslices.md)<!-- -->, [SelectorsFromSlices](./foundation-redux.selectorsfromslices.md)<!-- -->, [ThunkDispatch](./foundation-redux.thunkdispatch.md)
|
|
26
|
-
|
|
27
|
-
## Remarks
|
|
28
|
-
|
|
29
|
-
This type represents all the utilities and functions returned when creating a store. It provides access to the store state, actions, selectors, and subscription methods.
|
|
30
|
-
|
|
31
|
-
## Example
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
```typescript
|
|
35
|
-
const { store, actions, selectors, subscribeKey } = createStore(slices, initialState);
|
|
36
|
-
```
|
|
37
|
-
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@genesislcap/foundation-redux](./foundation-redux.md) > [ThunkDispatch](./foundation-redux.thunkdispatch.md)
|
|
4
|
-
|
|
5
|
-
## ThunkDispatch type
|
|
6
|
-
|
|
7
|
-
Type for thunk actions that can be dispatched to the store.
|
|
8
|
-
|
|
9
|
-
**Signature:**
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
export type ThunkDispatch<S extends SliceArray> = ThunkAction<void, RootStateFromSlices<S>, any, Action>;
|
|
13
|
-
```
|
|
14
|
-
**References:** [SliceArray](./foundation-redux.slicearray.md)<!-- -->, [RootStateFromSlices](./foundation-redux.rootstatefromslices.md)
|
|
15
|
-
|
|
16
|
-
## Remarks
|
|
17
|
-
|
|
18
|
-
This type represents thunk actions that can access the store's dispatch and getState functions. Thunks are useful for handling asynchronous operations and complex logic.
|
|
19
|
-
|
|
20
|
-
## Example
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
```typescript
|
|
24
|
-
const fetchUserThunk: ThunkDispatch<typeof slices> = (dispatch, getState) => {
|
|
25
|
-
fetch('/api/user').then(user => dispatch(actions.user.setUser(user)));
|
|
26
|
-
};
|
|
27
|
-
```
|
|
28
|
-
|
package/docs/api/index.md
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md)
|
|
4
|
-
|
|
5
|
-
## API Reference
|
|
6
|
-
|
|
7
|
-
## Packages
|
|
8
|
-
|
|
9
|
-
<table><thead><tr><th>
|
|
10
|
-
|
|
11
|
-
Package
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
</th><th>
|
|
15
|
-
|
|
16
|
-
Description
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
</th></tr></thead>
|
|
20
|
-
<tbody><tr><td>
|
|
21
|
-
|
|
22
|
-
[@genesislcap/foundation-redux](./foundation-redux.md)
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
</td><td>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
</td></tr>
|
|
29
|
-
</tbody></table>
|
|
30
|
-
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
## API Report File for "@genesislcap/foundation-redux"
|
|
2
|
-
|
|
3
|
-
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
|
|
4
|
-
|
|
5
|
-
```ts
|
|
6
|
-
|
|
7
|
-
import { Action } from '@reduxjs/toolkit';
|
|
8
|
-
import { createSlice } from '@reduxjs/toolkit';
|
|
9
|
-
import { EnhancedStore } from '@reduxjs/toolkit';
|
|
10
|
-
import { PayloadAction } from '@reduxjs/toolkit';
|
|
11
|
-
import { Reducer } from '@reduxjs/toolkit';
|
|
12
|
-
import { ReducersMapObject } from '@reduxjs/toolkit';
|
|
13
|
-
import { ThunkAction } from '@reduxjs/toolkit';
|
|
14
|
-
|
|
15
|
-
// Warning: (ae-forgotten-export) The symbol "FirstParameter" needs to be exported by the entry point index.d.ts
|
|
16
|
-
//
|
|
17
|
-
// @public
|
|
18
|
-
export type ActionsFromSlices<S extends SliceArray> = {
|
|
19
|
-
[K in S[number]['name']]: {
|
|
20
|
-
[ActionKey in keyof Extract<S[number], {
|
|
21
|
-
name: K;
|
|
22
|
-
}>['actions']]: (payload: FirstParameter<Extract<S[number], {
|
|
23
|
-
name: K;
|
|
24
|
-
}>['actions'][ActionKey]>) => void;
|
|
25
|
-
};
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
export { createSlice }
|
|
29
|
-
|
|
30
|
-
// @public
|
|
31
|
-
export const createStore: <S extends SliceArray>(slices: S, preloadedState: RootStateFromSlices<S>) => StoreReturn<S>;
|
|
32
|
-
|
|
33
|
-
export { PayloadAction }
|
|
34
|
-
|
|
35
|
-
// @public
|
|
36
|
-
export type RootStateFromSlices<S extends SliceArray> = {
|
|
37
|
-
[K in S[number]['name']]: Extract<S[number], {
|
|
38
|
-
name: K;
|
|
39
|
-
}> extends Slice<infer State> ? State : never;
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
// Warning: (ae-forgotten-export) The symbol "RemoveFirstParameter" needs to be exported by the entry point index.d.ts
|
|
43
|
-
//
|
|
44
|
-
// @public
|
|
45
|
-
export type SelectorsFromSlices<S extends SliceArray> = {
|
|
46
|
-
[K in S[number]['name']]: {
|
|
47
|
-
[SelectorKey in keyof Extract<S[number], {
|
|
48
|
-
name: K;
|
|
49
|
-
}>['selectors']]: (...payload: RemoveFirstParameter<Extract<S[number], {
|
|
50
|
-
name: K;
|
|
51
|
-
}>['selectors'][SelectorKey]>) => ReturnType<Extract<S[number], {
|
|
52
|
-
name: K;
|
|
53
|
-
}>['selectors'][SelectorKey]> extends void ? any : ReturnType<Extract<S[number], {
|
|
54
|
-
name: K;
|
|
55
|
-
}>['selectors'][SelectorKey]>;
|
|
56
|
-
};
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
// @public
|
|
60
|
-
export interface Slice<State = any> {
|
|
61
|
-
actions: Record<string, (payload: any) => Action>;
|
|
62
|
-
name: string;
|
|
63
|
-
reducer: Reducer<State, Action>;
|
|
64
|
-
selectors: Record<string, (...args: any[]) => any>;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
// @public
|
|
68
|
-
export type SliceArray = Slice[];
|
|
69
|
-
|
|
70
|
-
// @public
|
|
71
|
-
export type StoreReturn<S extends SliceArray> = {
|
|
72
|
-
reduxStore: EnhancedStore<RootStateFromSlices<S>>;
|
|
73
|
-
store: RootStateFromSlices<S>;
|
|
74
|
-
actions: ActionsFromSlices<S>;
|
|
75
|
-
selectors: SelectorsFromSlices<S>;
|
|
76
|
-
rootReducer: ReducersMapObject<RootStateFromSlices<S>>;
|
|
77
|
-
subscribeKey: (checkerFn: (s: RootStateFromSlices<S>) => string, callbackFn: (s: RootStateFromSlices<S>) => void) => void;
|
|
78
|
-
dispatch: (action: Action | ThunkDispatch<S>) => void;
|
|
79
|
-
notify: (sliceName: keyof RootStateFromSlices<S>) => void;
|
|
80
|
-
subscribe: (cb: (state: RootStateFromSlices<S>) => void) => void;
|
|
81
|
-
getState: () => RootStateFromSlices<S>;
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
// @public
|
|
85
|
-
export type ThunkDispatch<S extends SliceArray> = ThunkAction<void, RootStateFromSlices<S>, any, Action>;
|
|
86
|
-
|
|
87
|
-
// (No @packageDocumentation comment for this package)
|
|
88
|
-
|
|
89
|
-
```
|