attach

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

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

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 map them to params for 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 combine them to params for wrapped effect, should be pure
• source (Store | {[key: string]: Store}): Store or object with stores which values will be passed to second argument of mapParams

Returns

Effect: New effect