XState의 Context(양적 데이터) 알아보기

https://xstate.js.org/docs/guides/context.html#initial-context

Context | XState Docs

 

유한 상태는 유한 상태 기계와 상태 차트에 잘 정의되어 있지만,

잠재적으로 무한할 수 있는 양적(quantitative) 데이터(예: 임의의 문자열, 숫자, 개체 등)를 나타내는 상태는

확장 상태(extended state)로 표시됩니다.

 

이것은 상태 차트를 실제 응용 프로그램에 훨씬 더 유용하게 만듭니다.

XState에선 확장 상태를 컨텍스트라고 합니다.

물 한 컵을 채우는 것을 시뮬레이션하기 위해 컨텍스트가 사용되는 방법의 예입니다.

import { createMachine, assign } from 'xstate';

// Action to increment the context amount
const addWater = assign({
  amount: (context, event) => context.amount + 1
});

// Guard to check if the glass is full
function glassIsFull(context, event) {
  return context.amount >= 10;
}

const glassMachine = createMachine(
  {
    id: 'glass',
    // the initial context (extended state) of the statechart
    context: {
      amount: 0
    },
    initial: 'empty',
    states: {
      empty: {
        on: {
          FILL: {
            target: 'filling',
            actions: 'addWater'
          }
        }
      },
      filling: {
        // Transient transition
        always: {
          target: 'full',
          cond: 'glassIsFull'
        },
        on: {
          FILL: {
            target: 'filling',
            actions: 'addWater'
          }
        }
      },
      full: {}
    }
  },
  {
    actions: { addWater },
    guards: { glassIsFull }
  }
);

 

현재 컨텍스트는 State에서 state.context로 참조됩니다.

const nextState = glassMachine.transition(glassMachine.initialState, {
  type: 'FILL'
});

nextState.context;
// => { amount: 1 }

Initial Context (초기 컨텍스트)

---

초기 컨텍스트는 Machine의 컨텍스트 속성에 지정됩니다.

const counterMachine = createMachine({
  id: 'counter',
  // initial context
  context: {
    count: 0,
    message: 'Currently empty',
    user: {
      name: 'David'
    },
    allowedToIncrement: true
    // ... etc.
  },
  states: {
    // ...
  }
});

동적 컨텍스트(즉, 초기 값이 외부에서 제공되는 컨텍스트)의 경우 ,

제공된 컨텍스트 값으로 머신을 생성하는 머신 팩토리 함수를 사용할 수 있습니다(구현은 다를 수 있음).

const createCounterMachine = (count, time) => {
  return createMachine({
    id: 'counter',
    // values provided from function arguments
    context: {
      count,
      time
    }
    // ...
  });
};

const counterMachine = createCounterMachine(42, Date.now());

 

기존 머신의 경우 machine.withContext(...)를 사용 합니다.

const counterMachine = createMachine({
  /* ... */
});

// retrieved dynamically
const someContext = { count: 42, time: Date.now() };

const dynamicCounterMachine = counterMachine.withContext(someContext);

 

머신의 초기 컨텍스트는 초기 상태에서 검색할 수 있습니다.

dynamicCounterMachine.initialState.context;
// => { count: 42, time: 1543687816981 }

이것은 초기 상태가 초기 assign(...) 작업과 일시적인 전환(있는 경우)을 통해 계산되기 때문에,

machine.context에 직접 액세스하는 것보다 선호됩니다. 

 

Assign Action (할당 액션)

---

assign() 액션은 시스템의 컨텍스트를 업데이트하는 데 사용됩니다.

현재 컨텍스트의 값을 할당하는 방법을 나타내는  컨텍스트 "assigner"를 사용합니다.

Argument	Type	Description
assigner	object or function	The object assigner or function assigner which assigns values to the context (see below)

 

"assigner"는 객체일 수 있습니다(권장).

import { createMachine, assign } from 'xstate';
// example: property assigner

// ...
  actions: assign({
    // increment the current count by the event value
    count: (context, event) => context.count + event.value,

    // assign static value to the message (no function needed)
    message: 'Count changed'
  }),
// ...

또는 업데이트된 상태를 반환하는 함수일 수 있습니다.

// example: context assigner

// ...

  // return a partial (or full) updated context
  actions: assign((context, event) => {
    return {
      count: context.count + event.value,
      message: 'Count changed'
    }
  }),
// ...

위의 속성 할당자 및 컨텍스트 할당자 함수 서명에는 컨텍스트, 이벤트 및 메타의 3가지 인수가 제공됩니다.

Argument	Type	Description
context	TContext	The current context (extended state) of the machine
event	EventObject	The event that triggered the assign action
meta 4.7+	AssignMeta	an object with meta data (see below)

메타 개체에는 다음이 포함됩니다.

• state - 일반 전환의 현재 상태(초기 상태 전환에 대해 정의되지 않음)
• action - assign action

경고

assign(...) 함수는 작업 생성자입니다. 액션 객체만 반환하고 컨텍스트에 명령적으로 할당하지 않는 순수 함수입니다

Action Order

---

경고

XState 버전 5에서는 assign(...) 액션이 우선 순위가 지정되는 대신 순서대로 호출됩니다.

(이는 SCXML에 따르면 잘못된 동작입니다.)

버전 4에서 이대로 동작하길 원한다면, 시스템 구성에 preserveActionOrder: true를 추가하세요.

const counterMachine = createMachine({
  preserveActionOrder: true, // Ensures that assign actions are called in order
  // ...
  context: { count: 0 },
  states: {
    active: {
      on: {
        INC_TWICE: {
          actions: [
            (context) => console.log(`Before: ${context.count}`), // "Before: 0"
            assign({ count: (context) => context.count + 1 }), // count === 1
            assign({ count: (context) => context.count + 1 }), // count === 2
            (context) => console.log(`After: ${context.count}`) // "After: 2"
          ]
        }
      }
    }
  }
});

interpret(counterMachine).start().send({ type: 'INC_TWICE' });
// => "Before: 0"
// => "After: 2"

사용자 지정 액션은 항상 전환의 다음 상태와 관련하여 실행됩니다.

상태 전환에 assign(...) 작업이 있는 경우 이러한 액션은 항상 일괄 처리되고 먼저 계산되어 다음 상태를 결정합니다.

이는 상태가 유한 상태와 확장 상태(컨텍스트)의 조합이기 때문입니다.

예를 들어 이 카운터 시스템에서는 사용자 지정 작업이 예상대로 작동하지 않습니다.

const counterMachine = createMachine({
  id: 'counter',
  context: { count: 0 },
  initial: 'active',
  states: {
    active: {
      on: {
        INC_TWICE: {
          actions: [
            (context) => console.log(`Before: ${context.count}`), // "Before: 2"
            assign({ count: (context) => context.count + 1 }), // count === 1
            assign({ count: (context) => context.count + 1 }), // count === 2
            (context) => console.log(`After: ${context.count}`) // "After: 2"
          ]
        }
      }
    }
  }
});

interpret(counterMachine).start().send({ type: 'INC_TWICE' });
// => "Before: 2"
// => "After: 2"

이는 두 assign(...) 액션이 순서대로 배치되고, 먼저(마이크로스텝에서) 실행되기 때문입니다.

따라서 다음 상태 컨텍스트는 { count: 2 }이며 나머지 두 사용자 지정 작업에 모두 전달됩니다.

이 전환에 대해 생각하는 또 다른 방법은 다음과 같이 읽는 것입니다.

활성 상태에서 INC_TWICE 이벤트가 발생하면 다음 상태는 context.count가 업데이트된 활성 상태이며,
이러한 사용자 지정 작업은 해당 상태에서 실행됩니다.

원하는 결과를 얻기 위해 이것을 리팩토링하는 좋은 방법은 필요한 경우 명시적인 이전 값으로 컨텍스트를 모델링하는 것입니다.

const counterMachine = createMachine({
  id: 'counter',
  context: { count: 0, prevCount: undefined },
  initial: 'active',
  states: {
    active: {
      on: {
        INC_TWICE: {
          actions: [
            (context) => console.log(`Before: ${context.prevCount}`),
            assign({
              count: (context) => context.count + 1,
              prevCount: (context) => context.count
            }), // count === 1, prevCount === 0
            assign({ count: (context) => context.count + 1 }), // count === 2
            (context) => console.log(`After: ${context.count}`)
          ]
        }
      }
    }
  }
});

interpret(counterMachine).start().send({ type: 'INC_TWICE' });
// => "Before: 0"
// => "After: 2"

이점은 다음과 같습니다.

• 확장 상태(컨텍스트)는 보다 명시적으로 모델링됩니다.
• 암시적 중간 상태가 없으므로 잡기 어려운 버그를 방지합니다.
• 작업 순서는 더 독립적입니다("이전" 로그는 "이후" 로그 뒤에 올 수도 있습니다!)
• 상태 테스트 및 검사 촉진 

Notes (주목)

---

• 🚫 기계의 컨텍스트를 외부에서 변경하지 마십시오. 모든 것은 이유가 있고 모든 컨텍스트 변경은 이벤트로 인해 명시적으로 발생해야 합니다.
• assign({ ... })의 객체 구문을 선호합니다. 이를 통해 향후 분석 도구에서 특정 속성이 선언적으로 어떻게 변경될 수 있는지 예측할 수 있습니다.
• 할당은 누적될 수 있으며 순차적으로 실행됩니다.

// ...
  actions: [
    assign({ count: 3 }), // context.count === 3
    assign({ count: context => context.count * 2 }) // context.count === 6
  ],
// ...

• 액션과 마찬가지로 assign() 액션을 문자열이나 함수로 표현한 다음 머신 옵션에서 참조하는 것이 가장 좋습니다.

const countMachine = createMachine({
  initial: 'start',
  context: { count: 0 }
  states: {
    start: {
      entry: 'increment'
    }
  }
}, {
  actions: {
    increment: assign({ count: context => context.count + 1 }),
    decrement: assign({ count: context => context.count - 1 })
  }
});

• 또는 명명된 함수로 말입니다. (위와 동일한 결과):

const increment = assign({ count: context => context.count + 1 });
const decrement = assign({ count: context => context.count - 1 });

const countMachine = createMachine({
  initial: 'start',
  context: { count: 0 }
  states: {
    start: {
      // Named function
      entry: increment
    }
  }
});

• 이상적으로 컨텍스트는 일반 JavaScript 객체로 표현할 수 있어야 합니다. 즉, JSON으로 직렬화할 수 있어야 합니다.
• assign() 액션이 발생하기 때문에 다른 액션이 실행되기 전에 컨텍스트가 업데이트됩니다.
  • 이는 동일한 단계 내의 다른 액션이 assign() 액션이 실행되기 전의 컨텍스트가 아닌 업데이트된 컨텍스트를 가져옴을 의미합니다.
• 당신의 상태는 액션의 순서에 의존해서는 안 되지만, 이를 염두에 두십시오(추후 변경 가능). 자세한 내용은 action order를 참조하세요.

타입스크립트 (스키마)

---

적절한 타입 유추를 위해 컨텍스트 타입을 시스템의 스키마 속성에 추가합니다.

import { createMachine } from 'xstate';

interface CounterContext {
  count: number;
  user?: {
    name: string;
  };
}

const machine = createMachine({
  schema: {
    context: {} as CounterContext
  },
  // ...
  context: {
    count: 0,
    user: undefined
  }
  // ...
});

 

typeof ...를 약어로 사용할 수도 있습니다.

const context = {
  count: 0,
  user: { name: '' }
};

const machine = createMachine({
  schema: {
    context: {} as typeof context
  },
  // ...
  context
  // ...
});​

 

 

그러나 TypeScript 추론은 완벽하지 않으므로 컨텍스트와 이벤트를 제네릭으로 assign<Context, Event>(...)에 추가하는 것을 추천합니다.

// ...
on: {
  INCREMENT: {
    // Generics guarantee proper inference
    actions: assign<CounterContext, CounterEvent>({
      count: (context) => {
        // context: { count: number }
        return context.count + 1;
      }
    });
  }
}
// ...

 

Quick Reference

---

초기 컨텍스트 세팅

const machine = createMachine({
  // ...
  context: {
    count: 0,
    user: undefined
    // ...
  }
});

 

동적 초기 컨텍스트 세팅 (머신팩터리)

const createSomeMachine = (count, user) => {
  return createMachine({
    // ...
    // Provided from arguments; your implementation may vary
    context: {
      count,
      user
      // ...
    }
  });
};

 

동적 초기 컨텍스트 세팅 (withContext)

const machine = createMachine({
  // ...
  // Provided from arguments; your implementation may vary
  context: {
    count: 0,
    user: undefined
    // ...
  }
});

const myMachine = machine.withContext({
  count: 10,
  user: {
    name: 'David'
  }
});

 

컨텍스트에 할당

const machine = createMachine({
  // ...
  context: {
    count: 0,
    user: undefined
    // ...
  },
  // ...
  on: {
    INCREMENT: {
      actions: assign({
        count: (context, event) => context.count + 1
      })
    }
  }
});

 

할당 (정적 할당 - 속성 별)

// ...
actions: assign({
  counter: 42
}),
// ...

 

할당 (속성 별 할당)

// ...
actions: assign({
  counter: (context, event) => {
    return context.count + event.value;
  }
}),
// ...

 

할당 (컨텍스트 통째로)

 

// ...
actions: assign((context, event) => {
  return {
    counter: context.count + event.value,
    time: event.time,
    // ...
  }
}),
// ...

 

여러번 할당하기

 

// ...
// assume context.count === 1
actions: [
  // assigns context.count to 1 + 1 = 2
  assign({ count: (context) => context.count + 1 }),
  // assigns context.count to 2 * 3 = 6
  assign({ count: (context) => context.count * 3 })
],
// ...