v28
Addons
Guides
Effects
Developing applications is not only about managing state, but also managing side effects. A typical side effect would be an HTTP request or talking to localStorage. In Overmind we just call these effects. There are several reasons why you would want to use effects:
- 1.All the code in your actions will be domain specific, no low level generic APIs
- 2.Your actions will have less code and you avoid leaking things like URLs, types etc.
- 3.You decouple the underlying tool from its usage, meaning that you can replace it at any time without changing your application logic
- 4.You can more easily expand the functionality of an effect. For example you want to introduce caching or a base URL to an HTTP effect
- 5.The devtool tracks its execution
- 6.If you write Overmind tests, you can easily mock them
- 7.You can lazy-load the effect, reducing the initial payload of the app
Exposing an existing tool
overmind/effects.js
1
export { default as http } from 'axios'
Copied!
overmind/index.js
1
import { state } from './state'
2
import * as actions from './actions'
3
import * as effects from './effects'
4
5
export const config = {
6
state,
7
actions,
8
effects
9
}
Copied!
We are just exporting the existing library from our effects file and including it in the application config. Now Overmind is aware of an http effect. It can track it for debugging and all actions and operators will have it injected.
Let us put it to use in an action that grabs the current user of the application.
overmind/actions.js
1
export const loadApp = async ({ effects, state }) => {
2
state.currentUser = await effects.http.get('/user')
3
}
Copied!
That was basically it. As you can see we are exposing some low level details like the http method used and the URL. Let us follow the encouraged way of doing things and create our own api effect.
Specific API
It is highly encouraged that you avoid exposing tools with their generic APIs. Rather build your own APIs that are more closely related to the domain of your application. Maybe you have an endpoint for fetching the current user. Create that as an API for your app.
overmind/effects.js
1
import * as axios from 'axios'
2
3
export const api = {
4
getCurrentUser() {
5
return axios.get('/user')
6
}
7
}
Copied!
Now you can see how clean your application logic becomes:
overmind/actions.ts
1
export const loadApp = async ({ effects, state }) => {
2
state.currentUser = await effects.api.getCurrentUser()
3
}
Copied!
An additional benefit with TypeScript is that your explicit typing is contained within the effect, in this case a User. That means when consuming the effects you get the typing for free.
Initializing effects
It can be a good idea to not allow your side effects to initialize when they are defined. This makes sure that they do not leak into tests or server side rendering. For example if you want to use Firebase, instead of initializing the Firebase application immediately we rather do it behind an initialize method:
overmind/effects.ts
1
import * as firebase from 'firebase'
2
3
// We use IIFE to hide the private "app" variable
4
export const api = (() => {
5
let app
6
7
return {
8
initialize() {
9
app = firebase.initializeApp(...)
10
},
11
async getPosts() {
12
const snapshot = await app.database().ref('/posts').once('value')
13
14
return snapshot.val()
15
}
16
}
17
})()
Copied!
Example of initializing the effect:
overmind/actions.js
1
export const onInitializeOvermind = async ({ effects }) => {
2
effects.api.initialize()
3
state.posts = await effects.api.getPosts()
4
}
Copied!
We are doing two things here:
- 1.
- 2.We have created an initialize method which we can call from the special onInitializeOvermind action, which runs when the Overmind instance is created
Effects and state
Typically you explicitly communicate with effects from actions, by calling methods. But sometimes you need effects to know about the state of the application, or maybe some internal state in the effect should be exposed on your application state. Again we can take advantage of an initialize method on the effect:
overmind/effects.js
1
// We use an IIFE to isolate some variables
2
export const socket = (() => {
3
_options
4
_ws
5
return {
6
initialize(options) {
7
_options = options
8
_ws = new WebSocket('ws://...')
9
_ws.onclose = () => options.onStatusChange('close')
10
_ws.onopen = () => options.onStatusChange('open')
11
_ws.addEventListener(
12
'message',
13
(event) => options.onMessage(event.data)
14
)
15
},
16
send(type, data) {
17
_ws.postMessage({
18
type,
19
data,
20
token: _options.getToken()
21
})
22
}
23
}
24
})()
Copied!
overmind/actions.js
1
export const onInitializeOvermind = async ({ state, effects, actions }) => {
2
effects.socket.initialize({
3
onMessage: actions.onMessage,
4
onStatusChange: actions.onSocketStatusChange,
5
getToken() {
6
return state.token
7
}
8
})
9
}
Copied!
Here we are passing in actions that can be triggered by the effect to expose internal state and/or other information that you want to manage.
Lazy effects
You can also lazily load your effects in the initialize method. Let us say we wanted to load Firebase and its API on demand, or maybe just split out the code to make our app start faster.
overmind/effects.js
1
export const api = (() => {
2
let app
3
4
return {
5
async initialize() {
6
const firebase = await import('firebase')
7
8
app = firebase.initializeApp(...)
9
},
10
async getPosts() {
11
const snapshot = await app.database().ref('/posts').once('value')
12
13
return snapshot.val()
14
}
15
}
16
})()
Copied!
In our initialize() we would just have to wait for the initialization to finish before using the API:
overmind/actions.js
1
export const onInitializeOvermind = async ({ effects }) => {
2
effects.api.initialize()
3
state.posts = await effects.api.getPosts()
4
}
Copied!
We could have been even bolder here making our effect download its dependency related to using any of its methods. Imagine for example the firebase library downloading when you run a login method on the effect.
Configurable effect
By defining a class we can improve testability, allow using environment variables and even change out the actual implementation.
overmind/effects.ts
1
import axios from 'axios'
2
3
export class Api {
4
private baseUrl
5
private request
6
constructor (baseUrl, request) {
7
this.baseUrl = baseUrl
8
this.request = request
9
}
10
getCurrentUser() {
11
return this.request.get(`${this.baseUrl}/user`)
12
}
13
}
14
15
export const api = new Api(IS_PRODUCTION ? '/api/v1' : 'http://localhost:4321', axios)
Copied!
We export an instance of our Api to the application. This allows us to also create instances in isolation for testing purposes, making sure our Api class works as we expect.
Summary
Importing side effects directly into your code should be considered bad practice. If you think about it from an application standpoint it is kinda weird that it runs HTTP verb methods with a URL string passed in. It is better to create an abstraction around it to make your code more consistent with the domain, and by doing so also improve maintainability.
Last modified 5mo ago