Skip to content

Commit d1971a0

Browse files
authored
Merge pull request #661 from shubham1206agra/connect-without-view
[NoQA] Implemented Onyx.connectWithoutView function
2 parents 340f5f2 + 0829568 commit d1971a0

2 files changed

Lines changed: 72 additions & 8 deletions

File tree

API.md

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,16 @@
99
<dd><p>Initialize the store with actions and listening for storage events</p>
1010
</dd>
1111
<dt><a href="#connect">connect(connectOptions)</a> ⇒</dt>
12+
<dd><p>Connects to an Onyx key given the options passed and listens to its changes.
13+
This method will be deprecated soon. Please use <code>Onyx.connectWithoutView()</code> instead.</p>
14+
</dd>
15+
<dt><a href="#connectWithoutView">connectWithoutView(connectOptions)</a> ⇒</dt>
1216
<dd><p>Connects to an Onyx key given the options passed and listens to its changes.</p>
1317
</dd>
1418
<dt><a href="#disconnect">disconnect(connection)</a></dt>
1519
<dd><p>Disconnects and removes the listener from the Onyx key.</p>
1620
</dd>
17-
<dt><a href="#set">set(key, value)</a></dt>
21+
<dt><a href="#set">set(key, value, options)</a></dt>
1822
<dd><p>Write a value to our store with the given key</p>
1923
</dd>
2024
<dt><a href="#multiSet">multiSet(data)</a></dt>
@@ -66,6 +70,33 @@ Initialize the store with actions and listening for storage events
6670

6771
## connect(connectOptions) ⇒
6872
Connects to an Onyx key given the options passed and listens to its changes.
73+
This method will be deprecated soon. Please use `Onyx.connectWithoutView()` instead.
74+
75+
**Kind**: global function
76+
**Returns**: The connection object to use when calling `Onyx.disconnect()`.
77+
78+
| Param | Description |
79+
| --- | --- |
80+
| connectOptions | The options object that will define the behavior of the connection. |
81+
| connectOptions.key | The Onyx key to subscribe to. |
82+
| connectOptions.callback | A function that will be called when the Onyx data we are subscribed changes. |
83+
| connectOptions.waitForCollectionCallback | If set to `true`, it will return the entire collection to the callback as a single object. |
84+
| connectOptions.withOnyxInstance | The `withOnyx` class instance to be internally passed. **Only used inside `withOnyx()` HOC.** |
85+
| connectOptions.statePropertyName | The name of the component's prop that is connected to the Onyx key. **Only used inside `withOnyx()` HOC.** |
86+
| connectOptions.displayName | The component's display name. **Only used inside `withOnyx()` HOC.** |
87+
| connectOptions.selector | This will be used to subscribe to a subset of an Onyx key's data. **Only used inside `useOnyx()` hook or `withOnyx()` HOC.** Using this setting on `useOnyx()` or `withOnyx()` can have very positive performance benefits because the component will only re-render when the subset of data changes. Otherwise, any change of data on any property would normally cause the component to re-render (and that can be expensive from a performance standpoint). |
88+
89+
**Example**
90+
```ts
91+
const connection = Onyx.connectWithoutView({
92+
key: ONYXKEYS.SESSION,
93+
callback: onSessionChange,
94+
});
95+
```
96+
<a name="connectWithoutView"></a>
97+
98+
## connectWithoutView(connectOptions) ⇒
99+
Connects to an Onyx key given the options passed and listens to its changes.
69100

70101
**Kind**: global function
71102
**Returns**: The connection object to use when calling `Onyx.disconnect()`.
@@ -83,7 +114,7 @@ Connects to an Onyx key given the options passed and listens to its changes.
83114

84115
**Example**
85116
```ts
86-
const connection = Onyx.connect({
117+
const connection = Onyx.connectWithoutView({
87118
key: ONYXKEYS.SESSION,
88119
callback: onSessionChange,
89120
});
@@ -97,11 +128,11 @@ Disconnects and removes the listener from the Onyx key.
97128

98129
| Param | Description |
99130
| --- | --- |
100-
| connection | Connection object returned by calling `Onyx.connect()`. |
131+
| connection | Connection object returned by calling `Onyx.connect()` or `Onyx.connectWithoutView()`. |
101132

102133
**Example**
103134
```ts
104-
const connection = Onyx.connect({
135+
const connection = Onyx.connectWithoutView({
105136
key: ONYXKEYS.SESSION,
106137
callback: onSessionChange,
107138
});
@@ -110,7 +141,7 @@ Onyx.disconnect(connection);
110141
```
111142
<a name="set"></a>
112143

113-
## set(key, value)
144+
## set(key, value, options)
114145
Write a value to our store with the given key
115146

116147
**Kind**: global function
@@ -119,6 +150,7 @@ Write a value to our store with the given key
119150
| --- | --- |
120151
| key | ONYXKEY to set |
121152
| value | value to store |
153+
| options | optional configuration object |
122154

123155
<a name="multiSet"></a>
124156

lib/Onyx.ts

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,10 +81,11 @@ function init({
8181

8282
/**
8383
* Connects to an Onyx key given the options passed and listens to its changes.
84+
* This method will be deprecated soon. Please use `Onyx.connectWithoutView()` instead.
8485
*
8586
* @example
8687
* ```ts
87-
* const connection = Onyx.connect({
88+
* const connection = Onyx.connectWithoutView({
8889
* key: ONYXKEYS.SESSION,
8990
* callback: onSessionChange,
9091
* });
@@ -107,20 +108,48 @@ function connect<TKey extends OnyxKey>(connectOptions: ConnectOptions<TKey>): Co
107108
return connectionManager.connect(connectOptions);
108109
}
109110

111+
/**
112+
* Connects to an Onyx key given the options passed and listens to its changes.
113+
*
114+
* @example
115+
* ```ts
116+
* const connection = Onyx.connectWithoutView({
117+
* key: ONYXKEYS.SESSION,
118+
* callback: onSessionChange,
119+
* });
120+
* ```
121+
*
122+
* @param connectOptions The options object that will define the behavior of the connection.
123+
* @param connectOptions.key The Onyx key to subscribe to.
124+
* @param connectOptions.callback A function that will be called when the Onyx data we are subscribed changes.
125+
* @param connectOptions.waitForCollectionCallback If set to `true`, it will return the entire collection to the callback as a single object.
126+
* @param connectOptions.withOnyxInstance The `withOnyx` class instance to be internally passed. **Only used inside `withOnyx()` HOC.**
127+
* @param connectOptions.statePropertyName The name of the component's prop that is connected to the Onyx key. **Only used inside `withOnyx()` HOC.**
128+
* @param connectOptions.displayName The component's display name. **Only used inside `withOnyx()` HOC.**
129+
* @param connectOptions.selector This will be used to subscribe to a subset of an Onyx key's data. **Only used inside `useOnyx()` hook or `withOnyx()` HOC.**
130+
* Using this setting on `useOnyx()` or `withOnyx()` can have very positive performance benefits because the component will only re-render
131+
* when the subset of data changes. Otherwise, any change of data on any property would normally
132+
* cause the component to re-render (and that can be expensive from a performance standpoint).
133+
* @returns The connection object to use when calling `Onyx.disconnect()`.
134+
*/
135+
function connectWithoutView<TKey extends OnyxKey>(connectOptions: ConnectOptions<TKey>): Connection {
136+
return connectionManager.connect(connectOptions);
137+
}
138+
110139
/**
111140
* Disconnects and removes the listener from the Onyx key.
112141
*
113142
* @example
114143
* ```ts
115-
* const connection = Onyx.connect({
144+
* const connection = Onyx.connectWithoutView({
116145
* key: ONYXKEYS.SESSION,
117146
* callback: onSessionChange,
118147
* });
119148
*
120149
* Onyx.disconnect(connection);
121150
* ```
122151
*
123-
* @param connection Connection object returned by calling `Onyx.connect()`.
152+
* @param connection Connection object returned by calling `Onyx.connect()` or `Onyx.connectWithoutView()`.
124153
*/
125154
function disconnect(connection: Connection): void {
126155
connectionManager.disconnect(connection);
@@ -700,6 +729,7 @@ function setCollection<TKey extends CollectionKeyBase, TMap>(collectionKey: TKey
700729
const Onyx = {
701730
METHOD: OnyxUtils.METHOD,
702731
connect,
732+
connectWithoutView,
703733
disconnect,
704734
set,
705735
multiSet,
@@ -718,6 +748,8 @@ function applyDecorators() {
718748
// @ts-expect-error Reassign
719749
connect = decorateWithMetrics(connect, 'Onyx.connect');
720750
// @ts-expect-error Reassign
751+
connectWithoutView = decorateWithMetrics(connectWithoutView, 'Onyx.connectWithoutView');
752+
// @ts-expect-error Reassign
721753
set = decorateWithMetrics(set, 'Onyx.set');
722754
// @ts-expect-error Reassign
723755
multiSet = decorateWithMetrics(multiSet, 'Onyx.multiSet');

0 commit comments

Comments
 (0)