Observing Redux
Before you can observe your Redux store, make sure you have used dependency injection to expose it to your Refract components!
Refract adds a method to your store called
observe (see Getting Started), which you can use to observe Redux from inside your aperture.1
const aperture = (component, initialProps) => {
2
const streamFromStore$ = initialProps.store.observe('something')
3
}
Copied!
store.observe takes one argument, which can be either a string or a function.Observing Actions
If you pass in a string,
store.observe returns a stream of actions dispatched to your store which have that string as their action type.1
const aperture = (component, { store }) => {
2
const ping$ = store.observe('PING')
3
const pong$ = store.observe('PONG')
4
}
Copied!
In this example,
ping$ will receive any action with a type of PING which gets dispatched to your store, and pong$ will receive any action with a type of PONG which gets dispatched to your store.Each observed action is passed into your stream with all its data - including the payload.
Observing State
If you pass in a function,
store.observe will treat it as a Redux selector, and return a stream which subscribes to the state using your function, initialised with the selector's current value. Any time the selected slice of state changes, its new value will be piped to your stream if changed (=== comparison).1
const storeShape = {
2
users: {
3
SomeUserName: {
4
balance: 999,
5
...user
6
}
7
}
8
}
9
​
10
const getBalance = username => state => state.users[username].balance
11
​
12
const aperture = (component, { store }) => {
13
const balance$ = store.observe(getBalance('SomeUserName'))
14
}
Copied!
In this example,
balance$ will receive a new value every time the user's balance changes.Note that this is particularly powerful in combination with curried selectors - by tweaking the above example to use the
initialProps to source the username, we can select the slice of state dynamically:1
const aperture = (component, { store, username }) => {
2
const balance$ = store.observe(getBalance(username))
3
}
Copied!
Combining Observations
As mentioned previously, Refract's API is designed to give you complete control over your side-effects, and you are encouraged to observe multiple sources simultaneously.
Observing both actions and state is a powerful combination which opens up many opportunities for complex functionality to be implemented in a clean and maintainable way.
Last modified 3yr ago
Copy link