Skip to content

Commit 881670f

Browse files
authored
docs: Update readme (#6)
1 parent 0d1fccc commit 881670f

File tree

1 file changed

+45
-0
lines changed

1 file changed

+45
-0
lines changed

README.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,51 @@ const BookList: React.FC = () => {
130130
export default BookList;
131131
```
132132

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+
133178
## 📖 Configuration
134179

135180
```typescript

0 commit comments

Comments
 (0)