asfktz

Effect Layers: Moving Dependencies from Service to Effect Execution

The Problem: Service Dependencies vs Program Dependencies

When designing Effect services, there's a critical distinction between what the service needs to exist versus what the program needs to execute. This distinction determines whether your services can be managed at the runtime level or need to be recreated for each execution.

Before: Service-Level Dependency

export class UserSrv extends Effect.Service<UserSrv>()("UserSrv", {

asfktz

TODO: Remove the incorrect parts.
See: https://gist.github.com/asfktz/49e2ca5030cb60be83da5386a6c07bbf2 for more recent insights.

Preventing Layer Recreation Per Request in Effect

Introduction

This tutorial demonstrates how to prevent recreating layers on every request by using a singleton managed runtime with Effect while still allowing dynamic, per-request dependencies. The main problem this solves is avoiding the wasteful recreation of the same layers repeatedly.

1. Setting Up Context Tags

asfktz

import React, { Children, cloneElement, useState, createContext, useContext } from 'react';

const ctx = createContext();

export function Tabs ({ children }) {
  const [selectedIndex, selectIndex] = useState(0);

  return (
    <ctx.Provider value={{ selectedIndex, selectIndex }}>
      {children}

asfktz

import './style.css';

import React, { useState } from 'react';
import Spinner from 'react-md-spinner';
import useInterval from '../../utils/useInterval';
import { random } from 'lodash';

const labels = [
	'מכוונים את הגיטרות',
	'פורשים מחצלות',

asfktz

const MyWrapperMiddleware = store => next => action => {
  const state = store.getState()

  if (!state.isLoggedIn)
    return next(action)

  const pouchMiddleware = PouchMiddleware({
    path: state.currentPath,
    db,

asfktz

let pouchMiddleware
let invalidate = true;

const MyWrapperMiddleware = store => next => action => {
  const state = store.getState()

  if (!state.isLoggedIn)
    return next(action)

  if (someConditionForChange) {

asfktz

import React from 'react';
import { Control, Form } from 'react-redux-form';

class UserForm extends React.Component {
  render() {
    return (
      <Form model="forms.user"
        onSubmit={(user) =>
          console.log('-->', user)
        }>

asfktz

class Button extends React.Component {
  handleClick = (e) => {
    console.log(this)
  }

  render () {
    return (
      <div onClick={this.handleClick}>
        Click
      </div>

asfktz

class Button extends React.Component {
  constructor (props) {
    super(props)

    this.handleClick = this.handleClick.bind(this)
  }

  handleClick () {
    console.log(this)
  }

asfktz

class Button extends React.Component {
  handleClick () {
    console.log(this)
  }

  render () {
    return (
      <div onClick={::this.handleClick}>
        Click
      </div>