attach

Wrapper for effect, which allows to map effect arguments and use data from stores.

Use cases: declarative way to pass values from stores to effects and argument preprocessing.

Formulae

attach({ effect, mapParams, source? }): newEffect

When newEffect is called, call mapParams with params of the newEffect and data from source, then call original effect

  • If attach called without source, mapParams will be called only with params of the newEffect
  • attach() always returns new Effect

Short example

import { createEffect, attach } from 'effector'
const original = createEffect({
handler: (params) => {
console.log("Original effect called with", params)
}
})
const created = attach({
effect: original,
mapParams: (params) => {
console.log("Created effect called with", params)
return { wrapped: params }
}
})
created("HELLO")
// => Created effect called with "HELLO"
// => Original effect called with { wrapped: "HELLO" }

Try it

Short example with source

import {createEffect, attach} from 'effector'
const original = createEffect({
handler: params => {
console.log('Original effect called with', params)
},
})
const data = createStore(8900)
const created = attach({
effect: original,
source: data,
mapParams: (params, data) => {
console.log('Created effect called with', params, 'and data', data)
return {wrapped: params, data}
},
})
created('HELLO')
// => Created effect called with "HELLO" and data 8900
// => Original effect called with {wrapped: "HELLO", data: 8900}

Try it

Long example

import {createEffect, attach, createStore} from 'effector'
const backendRequest = createEffect({
async handler({token, data, resource}) {
const req = fetch(`https://example.com/api${resource}`, {
method: 'POST',
headers: {
Authorization: `Bearer ${token}`,
},
body: JSON.stringify(data),
})
},
})
const requestsSend = createStore(0).on(backendRequest, total => total + 1)
requestsSend.watch(total => {
console.log(`client analytics: sent ${total} requests`)
})
const token = createStore('guest_token')
const authorizedRequest = attach({
effect: backendRequest,
source: token,
mapParams: ({data, resource}, token) => ({data, resource, token}),
})
const createRequest = resource =>
attach({
effect: authorizedRequest,
mapParams: data => ({data, resource}),
})
const getUser = createRequest('/user')
const getPosts = createRequest('/posts')
const user = await getUser({name: 'alice'})
/*
POST https://example.com/api/user
{"name": "alice"}
Authorization: Bearer guest_token
*/
// => client analytics: sent 1 requests
const posts = await getPosts({user: user.id})
/*
POST https://example.com/api/posts
{"user": 18329}
Authorization: Bearer guest_token
*/
// => client analytics: sent 2 requests

attach({effect, mapParams})

Arguments

  • effect (Effect): Wrapped effect
  • mapParams ((newParams) => effectParams): Function which receives new params and maps them to the params of the wrapped effect, should be pure. Works like event.prepend

Returns

Effect: New effect

attach({effect, mapParams, source})

Arguments

  • effect (Effect): Wrapped effect
  • mapParams ((newParams, values) => effectParams): Function which receives new params and current value of source and combines them to the params of the wrapped effect, should be pure
  • source (Store | {[key: string]: Store}): Store or object with stores, values of which will be passed to the second argument of mapParams

Returns

Effect: New effect

Last updated on