davidkpiano

title	published	description	tags
Redux is half of a pattern.	false

Redux is fantastic.

Some of you might disagree, so here's the main reason why it's fantastic: over the last few years, it has popularized the idea of using message-passing to manage application state. Instead of making arbitrary method calls to various class instances or mutating data structures, we now can think of state as being in a "predictable container" that only changes as a reaction to these "messages."

davidkpiano

const increment = assign({
  count: ctx => ctx.count + 1
});

const decrement = assign({
  count: ctx => ctx.count - 1
});

const MIN = 0;
const MAX = 10;

davidkpiano

function dependenciesResolved(ctx) {
  return ctx.depCount === 5;
}
  
const workflow = Machine({
  id: 'dash workflow',
  initial: 'resolving dependencies',
  context: {
    depCount: 0
  },

davidkpiano

const everyoneApproved = ctx => ctx.approvals >= 2;

const machine = Machine({
  id: 'approval',
  initial: 'requesting',
  context: {
    approvals: 0
  },
  states: {
    requesting: {

davidkpiano

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(Math.floor(Math.random() * 100));
    }, 2000)
  })
}
  
const fetchMachine = Machine({
  id: 'fetch',

davidkpiano

const vendingMachine = Machine({
  id: 'vending',
  initial: 0,
  states: {
    0: {
      on: {
        5: '5',
        10: '10',
        20: '20'
      }

davidkpiano

const states = {
  IDLE: "IDLE",
  HOVERING: "HOVERING",
  UPLOADING: "UPLOADING",
  SUCCESS: "SUCCESS"
};

const events = {
  MOUSEENTER: "MOUSEENTER",
  MOUSELEAVE: "MOUSELEAVE",

davidkpiano

const dogFetcherMachine = Machine({
  id: "dog fetcher",
  initial: "idle",
  context: {
    dog: null,
    error: null
  },
  states: {
    idle: {
      on: { FETCH: "loading" }

davidkpiano

const getBlobMetadata = () => new Promise(res => {
  setTimeout(() => {
    console.log('yeah')
    res({
      Path: 'somepath.csv'
    });
  }, 2000)
});

const readFile = () => new Promise((res, rej) => {

davidkpiano

const stepMachine = Machine(
  {
    id: "steps",
    initial: "step1",
    states: {
      step1: {
        on: {
          NEXT: "step2"
        }
      },