christianalfoni

import {
  OnCallWithServices,
  ResponseError,
  OnRequestWithServices,
} from './services'
import * as Stripe from 'stripe'

export const subscribe: OnCallWithServices<{
  token: string
  plans: string[]

christianalfoni

Updated packages

package	from version	to version
betsy	1.0.2	1.0.2-1561921753905
overmind	18.0.1	19.0.0-1561921753906
overmind-angular	18.0.1	19.0.0-1561921753906
overmind-devtools	19.0.1	20.0.0-1561921753906
overmind-devtools-client	1.0.0	2.0.0-1561921753906
overmind-react	19.0.1	20.0.0-1561921753906
overmind-themes	1.0.2	1.0.2-1561921753906

christianalfoni

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart' as rx;

Observer currentObserver;

class Observer {
  Map<rx.Observable, StreamSubscription> _subscriptions = Map();
  rx.BehaviorSubject _subject = rx.BehaviorSubject();

christianalfoni

class Store {
  Store([Store parent = null]) {
      this.emit = parent == null ? (dynamic action) {
        if (_subscribers.containsKey(action)) {
          _subscribers[action].forEach((cb) => cb());
        }
      } : parent.emit;
  }
  Map<Action, Set<Function>> _subscribers = new Map();
	Function subscribe(List<Action> actions, Function callback) {

christianalfoni

The case for action based change detection

There are several approaches to detecting change, for example:

1. Mobx, Vue js, Overmind JS: Mutation detection using getters/setters or proxies.

2. Redux: Reference comparison, typically combined with immutability (Is previous value different than current?)

3. Cerebral JS: Path matching. With single state trees you can match what paths components depend on with what paths are being mutated in the state tree

christianalfoni

Updated packages

package	from version	to version
overmind	17.0.0	17.1.0
overmind-angular	17.0.0	17.1.0
overmind-devtools	18.0.0	18.1.0
overmind-react	18.0.0	18.1.0
overmind-vue	17.0.0	17.1.0

christianalfoni

export const open: Action = async ({ state, actions, effects }) => {
  state.currentPage = Page.ADMIN
  const messageUpdates = await effects.api.getAdminMessageUpdates()
  state.admin.messageUpdates = messageUpdates
  state.admin.users = await effects.api.getUsers(
    messageUpdates.map((update) => update.userUid)
  )

  if (state.admin.messageUpdates.length) {
    state.admin.isLoadingFeed = true

christianalfoni

export default JSON.parse(`{
  "0": {
    "actionId": 3,
    "actionName": "routeProcessView",
    "executionId": 1,
    "name": "setRoute",
    "operatorId": 0,
    "path": [],
    "type": "action",
    "isRunning": false,

christianalfoni

// Based on this comment: https://github.com/Microsoft/TypeScript/issues/20965#issuecomment-370114910

declare module "bem-jsx" {
  export type BlockType<Props extends { [prop: string]: string }> = React.ComponentType<Props> & {
    [key: string]: React.ComponentType<any>;
  };

  export default function block<T extends string, Props = { [K in T]?: string }>(
    blockName: string,
    modifiers?: T[],

christianalfoni

The APIs React.PureComponent and React.memo are used to optimize performance of React. From the documentation:

If your React component’s render() function renders the same result given the same props and state, you can use React.PureComponent for a performance boost in some cases.

Questions I hope would inspire to write another technical article on React, focusing on these APIs and performance:

1. I thought React always renders based on its props and state. What other reasons would make comparison break the behaviour of a component?