File tree Expand file tree Collapse file tree 1 file changed +45
-0
lines changed Expand file tree Collapse file tree 1 file changed +45
-0
lines changed Original file line number Diff line number Diff line change @@ -130,6 +130,51 @@ const BookList: React.FC = () => {
130
130
export default BookList ;
131
131
```
132
132
133
+ ### Usage with React Redux
134
+
135
+ Since the listener is a closure it has access only to the component values from the first render. Each subsequent render
136
+ has no effect on already defined listeners.
137
+
138
+ If you use Redux you can get the actual value directly from the store instance.
139
+
140
+ ``` typescript
141
+ // full example: https://snack.expo.dev/@quiknull/react-native-sse-redux-example
142
+ const Example: React .FC = () => {
143
+ const userName = useSelector ((state : RootState ) => state .user .name );
144
+
145
+ const pingHandler: EventSourceListener = useCallback (
146
+ (event ) => {
147
+ // In Event Source Listeners in connection with redux
148
+ // you should read state directly from store object.
149
+ console .log (" User name from component selector: " , userName ); // bad
150
+ console .log (" User name directly from store: " , store .getState ().user .name ); // good
151
+ },
152
+ [userName ]
153
+ );
154
+
155
+ useEffect (() => {
156
+ const token = " myToken" ;
157
+ const url = new URL (" https://demo.mercure.rocks/.well-known/mercure" );
158
+ url .searchParams .append (
159
+ " topic" ,
160
+ " https://example.com/my-private-topic"
161
+ );
162
+
163
+ const es = new EventSource (url , {
164
+ headers: {
165
+ Authorization: {
166
+ toString : function () {
167
+ return " Bearer " + token ;
168
+ }
169
+ }
170
+ }
171
+ });
172
+
173
+ es .addEventListener (" ping" , pingHandler );
174
+ }, []);
175
+ };
176
+ ```
177
+
133
178
## 📖 Configuration
134
179
135
180
``` typescript
You can’t perform that action at this time.
0 commit comments