정보실

웹학교

정보실

javascript 로봇, 유한 상태 머신용 1kB 라이브러리

본문

로봇은 1.3kB의 유한 상태 머신을 구축하기 위한 새로운 라이브러리입니다. 필수 토글 머신 예제는 다음과 같습니다.


import { createMachine, state, transition } from 'robot3';

const machine = createMachine({
inactive: state(
transition('toggle', 'active')
),
active: state(
transition('toggle', 'inactive')
)
}); 



원본 : https://matthewphillips.info/programming/announcing-robot.html


로봇의 주요 목표 중 하나는 기능 구성을 활성화하여 일반적인 작업을 나눌 수 있도록 하는 것입니다. 위의 토글 머신은 일반적인 작업을 수행하며 토글 이벤트는 다른 상태로 전환합니다. 이것을 함수로 추출 할 수 있습니다 :


import { createMachine, state, transition } from 'robot3';

const toggleTo = to => state(
transition('toggle', to)
);

const machine = createMachine({
inactive: toggleTo('active'),
active: toggleTo('inactive')
}); 


물론 토글 머신은 매우 일반적인 유형의 상태 머신입니다. 그래서 우리는 그것을 자체 기능 자체로 만들고 싶을 것입니다.


import { createMachine, state, transition } from 'robot3';

const toggleTo = to => state(
transition('toggle', to)
);

const toggleMachine = () => createMachine({
inactive: toggleTo('active'),
active: toggleTo('inactive')
});

const bold = toggleMachine();
const italic = toggleMachine();
const underline = toggleMachine(); 


유한 상태 머신은 상태 저장 UI를 작성하는 좋은 방법입니다. FSM을 상태의 정적 유형으로 생각할 수 있습니다. 가능한 상태를 선언적으로 배치하면 호환되지 않는 상태와 같은 버그를 피할 수 있습니다.


지난 몇 년 동안 프로그래밍에서 일어났던 위대한 일 중 하나는 React와 같은 라이브러리가 있는 선언적 UI 로의 마이그레이션이었습니다. 그러나 여전히 다음과 같은 명령 코드를 사용하여 구성 요소에 상태 저장 논리를 작성합니다.


function resetState() {
setValidating(false);
setSaving(false);
setBlurred(false);
setEditing(false);
if(!focused) setTouched(false);
setDirty(true);
} 


유한 상태 머신이 이를 수정합니다. 앱에서 FSM을 사용해야 하는 이유에 대한 더 큰 논증은 유한 상태 머신 이유를 참조하십시오.


통합 


로봇은 다음을 포함하여 널리 사용되는 다양한 뷰 라이브러리와 통합되어 있습니다.


다음은 React 앱에서 로봇을 사용하는 예입니다.


import React from 'react';
import ReactDOM from 'react-dom';
import { createMachine, state, transition } from 'robot3';
import { useMachine } from 'react-robot';

const machine = createMachine({
off: state(
transition('toggle', 'on')
),
on: state(
transition('toggle', 'off')
)
});

function App() {
const [current, send] = useMachine(machine);

return (
<>
<div>State: {current.name}</div>
<button onClick={() => send('toggle')}>
Toggle
</button>
</>
);
}

ReactDOM.render(<App />, document.querySelector('#app')); 




  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 28회 ]  작성일19-10-08 11:47

웹학교