alex35mil

// Bookmarks Bar -> Add Page…
// URL:
javascript:(function(){var p=document.location.search,r=/\&?w=1/;document.location.search=p?p.match(r)?p.replace(r,''):p+'&w=1':'?w=1'})()

alex35mil

toJS perf check

[ DEMO ]

• Form state is in the redux store
• I removed all toJS calls from selectors, so components deal w/ immutable objects
• Perf.start triggered on form state update (w/ value 1)
• Perf.stop — when this update is flushed to the DOM

Numbers from gif

alex35mil

const Button = ({ onClick, ...otherProps }) => {
  let domNode;
  return (
    <button
      {...otherProps}
      ref={ref => (domNode = ref)}
      onClick={event => {
        if (onClick) onClick(event);
        domNode.blur();
      }}

alex35mil

:root {
  --button: {
    background-color: var(--bg-color);
    color: var(--text-color);
  }
}

.blueButton {
  --bg-color: blue;
  --text-color: #fff;

alex35mil

/* eslint comma-dangle: ["error", "always-multiline"] */

// rest

/* ok */
const rest = ({
  prop,
  ...otherProps
//             ^
//             no comma

alex35mil

// Chrome -> Bookmarks Bar -> Add Page…
// Paste this in URL field:
javascript:(function(){var p=document.location.search,r=/\&?w=1/;document.location.search=p?p.match(r)?p.replace(r,''):p+'&w=1':'?w=1'})()

alex35mil

const selectEntity = entityId => ({
  type: ENTITY_SELECT,
  entityId,
});

const onEntitySelect = {
  [ENTITY_SELECT]: (state, { id }) => state.set('id', id),
//                           ^
//                           oops, `entityId` was dispatched
};

alex35mil

/* interactions/modalToggle.js */

const MODAL_SHOW = 'MODAL_SHOW';
const MODAL_HIDE = 'MODAL_HIDE';

// --- Show modal

// Action creator
export const showModal = () => ({ type: MODAL_SHOW });

alex35mil

/* reducer.js */

import state from './state';

import { onModalShow, onModalHide } from './interactions/modalToggle';
// ...

export default createReducer(state, {
  ...onModalShow,
  ...onModalHide,

alex35mil

// Action creator: dispatched from the thunk or whatever
const successAction = (entityId, data) => ({
  type: UPDATE_SUCCEEDED,
  entityId,
  data,
});

// Changes in the app state:

// Action handler -> ui/unitStore: resetting UI unit state