ferp-js
Search…
Getting Started
Building Your First App
Understanding Effects in Ferp
Understanding Actions in Ferp
Understanding Subscriptions in Ferp
Advanced Usage
Third-Party Libraries and Objects
Handling Uncontrolled Third Party Objects
Not everything in the world is functional and immutable, and occasionally your application needs to manage these things. Ferp provides effects and subscriptions for handling these types of systems, but it's not always obvious which one to use and how to implement it.
Rebuild objects by storing builder values
In the example of firebase, you may have a document reference that is constructed by:
1
firebase.database(app).ref().collection('foo').document('bar')
Copied!
While you could store the firebase ref object in state, having a serializable
effects/firebase.js
1
export const firebaseReadFx = (path, afterReadAction) => effects.defer((resolve) => {
2
firebase.database(app).ref(path).snapshot((value) => {
3
resolve(effects.act(afterReadAction, value));
4
});
5
});
6
7
// usage: firebaseReadFx('foo/bar', actionThatAcceptsValue)
Copied!
Event-driven objects
If you have objects like websockets, those are perfect for subscriptions. Here's how I would set it up:
1
import { app, effects } from 'ferp';
2
3
const INITIAL_STATE = {
4
websocket_url: 'wss://echo.websocket.org',
5
websocket: null,
6
messages: [],
7
};
8
9
const WebsocketSendFx = (data, websocket) => effects.thunk(() => {
10
if (websocket) websocket.send(data);
11
12
return effects.none();
13
});
14
15
const WebsocketSend = data => state => [
16
state,
17
WebsocketSendFx(data, state.websocket),
18
];
19
20
const OnConnected = (websocket) => (state) => [
21
{ ...state, websocket },
22
effects.act(WebsocketSend, 'hello, world'),
23
];
24
25
const OnDisconnected = (state) => [
26
{ ...state, websocket: null },
27
effects.none(),
28
];
29
30
const OnMessage = (message) => (state) => [
31
{ ...state, messages: state.messages.concat(message) },
32
effects.none(),
33
};
34
35
const WebsocketSubscription = (dispatch, websocketUrl, ConnectAction, DisconnectAction, MessageAction) => {
36
const websocket = new WebSocket(websocketUrl);
37
38
const onOpen = () => dispatch(ConnectAction(websocket));
39
const onClose = () => dispatch(Disconnect);
40
const onMessage = ({ data }) => dispatch(MessageAction(data));
41
42
websocket.addEventListener('open', onOpen);
43
websocket.addEventListener('close', onClose);
44
websocket.addEventListener('message', onMessage);
45
46
return () => {
47
websocket.removeEventListener('open', onOpen);
48
websocket.removeEventListener('close', onClose);
49
websocket.removeEventListener('message', onMessage);
50
51
websocket.close();
52
};
53
};
54
55
const dispatch = app({
56
init: [INITIAL_STATE, effects.none()],
57
subscribe: state => [
58
state.websocketUrl && [
59
WebsocketSubscription,
60
state.websocketUrl,
61
OnConnect,
62
OnDisconnect,
63
OnMessage,
64
],
65
],
66
});
Copied!
Last modified 3mo ago