marcusradell

React state management first principles

Description

There are many different ways to code in React. Choosing how you handle state can be overwhelming, and transitioning to something like Redux can mean tearing up your entire code base.

Let's see how we can write a statfeul React component at the start of a project, and how the needs change throughout the lifecycle of a project.

Abstract

We will go go from a plain connected React input field, and look at how we can write something more pure. There will be a set of five transformations of the same code. Each transformation uses boilerplate code, moving from an explorative phase into an exploitable phase.

marcusradell

// @NOTE: This is an experimental thought on removing some imperative details from the Redux setup.

import { takeLatest, put, call } from 'redux-saga/effects'

// @TODO(MANI): Support an apiAction per baseActionType
export const makeAsyncMakeSagas = (baseActionType, asyncActionTypes) => {
  const makeSagas = apiAction => {
    function* loadSaga(payload) {
      const result = yield call(apiAction, payload)
      const { success, data, errors } = result

marcusradell

It looks like this is your first time using Cypress: 1.0.2

cypress:cli writing verified version string "null" +33ms cypress:cli path to info.json file /mnt/c/Users/mnlt/code/cypress-lab/node_modules/cypress/dist/info.json +4m s cypress:cli path to info.json file /mnt/c/Users/mnlt/code/cypress-lab/node_modules/cypress/dist/info.json +5m s cypress:cli running smoke test +54ms cypress:cli using Cypress executable /mnt/c/Users/mnlt/code/cypress-lab/node_modules/cypress/dist/Cypress/Cyp ress +29ms

marcusradell

Lift state sideways

This is a CFP for ReactiveConf Please ⭐️ this gist if you want to see me present at Reactiveconf!

All other feedback is welcome as well <3

Problem

Have you written enough states managing toggle buttons yet? Do you feel like lifting state upwards spreads out concerns and couples code?

marcusradell

// Imperative, pure, and testable
const pluckColId = ({colId}) => colId
const columnsInSet => columns => ({colId}) => columns.has(colId)

// Declarative
const colIds = agGridStateManager.columnState.map(pluckColId)
const columnsInGrid = new Set(allColumns.map(pluckColId))
const columnState = agGridStateManager.columnState.filter(columnsInSet(columnsInGrid))

// Effect

marcusradell

// I think it might lose its appeal, but if you need to transform for some technical reason, it might work.

// toKebab needs to be implemented elsewhere.
const kebabProps = toKebab({
  someProp: 'foo',
  someOtherProp: 'bar'
})

const View = () => return <MyComponent {...kebabProps} anotherOtherProp={'qux'} />

marcusradell

import React, { Component } from "react";

// @TODO: Import a local file that proxies rxjs so we can import a subset of the library.
import Rx from "rxjs";

const epicsToUpdaters = (epics, actionsProxy) => {
  const updaters = Object.keys(epics).reduce((accumulator, key) => {
    const successKey = `${key}Success`;
    const errorKey = `${key}Error`;
    // eslint-disable-next-line no-param-reassign

marcusradell

  const categoryFiltersStateStream = viewDataStream.switchMap(
    checkboxesComponent => {
      sub = checkboxesComponent.checkboxesStateStream.subscribe(
        state => console.log("INNER EMIT 2", state, sub),
        error => console.error("INNER ERROR 2", error),
        // but also closes before first emit
        () => console.log("INNER COMPLETE 2", sub)
      );
      return checkboxesComponent.checkboxesStateStream;
    }

marcusradell

test("connectModel epics", () => {
  const initialState = {
    value: "initial",
    loading: null
  };

  const updaters = {};

  const epics = {
    loadValue: {

marcusradell

const initialState = {
  isInitialState: true,
  errors: [],
  showUserLog: true,
  showSystemLog: false,
  startDate: null,
  endDate: null,
  // @TODO: Remove mock data
  categories: ["category 1", "category 2"],
  categoryFilters: {}