Finite state machine & statecharts – XState

// ...생략
const [invalidPassword, setInvalidPassword] = useState(false);

const handleChangePassword = (e) => {
  const pwd = e.target.value;
  setInvalidPassword(pwd.length < 8);
  setPassword(pwd);
};

const isDisabled = isLoading || invalidPassword;

return (
	<div className='app'>
    <button disabled={isDisabled} type='submit'>OK</button>
  // ...
  </div>
);

const isAwesomeState = isLoading && isSuccess && invalidPassword && !!error; // ??

const fetchMachine = createMachine({
  id: 'fetch',
  initial: 'idle',
  states: {
    idle: {
      on: {
        FETCHING: {
          target: 'loading',
        }
      }
    },
    loading: {
      on: {
        SUCCESS: {
          target: 'resolved',
        },
        FAILURE: {
          target: 'rejected',
        }
      }
    },
    resolved: {
      type: 'final',
    },
    rejected: { }
  }
});

const [state, send, service] = useMachine(fetchMachine);

const machine = createMachine({
  states: {
    // state node
    idle: {
      on: {
        FETCH: {
          target: 'pending';
        }
      }
    },
    pending: { }
  }
});

// transition 함수는 현재의 상태와 전이할 이벤트를 명시합니다.
const nextState = machine.transition('idle', { type: 'FETCH'});
// State { value: { 'pending' } ... }

// 위 동작이랑 같음.
const service = interpret(machine);
service.start();
service.send('FETCH');
// State { value: { 'pending' } ... }

state.matches('loading')

const [state, send] = useMachine(fetchMachine);
const [id, setId] = useState('');
const [password, setPassword] = useState('');
const [invalidPassword, setInvalidPassword] = useState(false);
const [error, setError] = useState(null);

const handleSubmit = async (e) => {
  e.preventDefault();
  send('FETCHING');
  if (error) {
    setError(null);
  }
  try {
    await signUp({ id, password });
    send('SUCCESS');
  } catch (e) {
    setError(e);
    send('FAILURE');
  }
};

const handleChangeId = (e) => {
  setId(e.target.value);
};

const handleChangePassword = (e) => {
  const pwd = e.target.value;
  setInvalidPassword(pwd.length < 8);
  setPassword(pwd);
};

const isDisabled = state.matches('loading') || invalidPassword;

return (
  <div className='app'>
    <h1>회원가입</h1>
    <form onSubmit={handleSubmit}>
      <label>id</label>
      <input id='id' onChange={handleChangeId} />
      <label htmlFor={'password'}>password</label>
      <input id='password' type='password' onChange={handleChangePassword} />
      <button disabled={isDisabled} type='submit'>OK</button>
    </form>
    { state.matches('loading') && <p>Loading...</p> }
    { state.matches('resolved') && <p>회원가입에 성공했습니다.</p>}
    { state.matches('rejected') && <p>{error}</p>}
  </div>
);

export const fetchMachine = createMachine({
  // ...
  context: {
    id: '',
    password: '',
    error: null
  },
  idle: {
    on: {
      UPDATE_ID: {
        actions: assign((context, event) => ({
          id: event.data
        }))
      },
      UPDATE_PASSWORD: {
        actions: assign((context, event) => ({
          password: event.data
        }))
      },
      // ...
    },
  },
  loading: { // loading에 초기 진입했을 때 error null로 초기화.
    entry: assign((context, event) => { error: null });
  }
// 후략 ...

// 원래 코드
// const handleSubmit = async (e) => {
//   e.preventDefault();
//   send('FETCHING');
//   if (error) {
//     setError(null);
//   }
//   try {
//     await signUp({ id, password });
//     send('SUCCESS');
//   } catch (e) {
//     setError(e);
//     send('FAILURE');
//   }
// };

const handleSubmit = async (e) => {
  e.preventDefault();
  send('fetching');
};

useEffect(() => {
  if (state.matches('loading')) {
    const doFetch = async () => {
      if (error) {
        setError(null);
      }
      try {
        await signUp({ id, password });
        send('success');
      } catch (e) {
        setError(e);
        send('failure');
      }
    };
    doFetch();
  }
}, [state]);

const toggleMachine = createMachine({
  // ...
  loading: {
    entry: assign((context, event) => ({
      error: null
    })),
    invoke: {
      id: 'signUpForm',
      src: (context, event) => signUp(event.data),
      onDone: {
        target: 'resolved'
      },
      onError: {
        target: 'rejected',
        actions: assign((context, event) => ({
          error: evt.data
        }))
      }
    }
  }
  // ...
});

// machine
export const fetchMachine = createMachine({
  // ...
  FETCHING: {
    target: 'loading',
    cond: (context, event) => {
      return context.password.length > 7;
    }
  }
  // ...
});

// validation 용 필드는 삭제합니다.
// const [invalidPassword, setInvalidPassword] = useState(false);

// disabled 조건에 machine이 다음 Transition이 변화되었는지를 판단합니다.
const isDisabled = state.matches('loading') || fetchMachine.transition(state, 'FETCHING').changed;

return (
// ...
  <button disabled={isDisabled} type='submit'>OK</button>
)

// machine
export const fetchMachine = createMachine({
  // ...
  FETCHING: {
    target: 'loading',
    cond: 'isAvaliablePasswordLength', // 함수의 이름이어야 합니다.
  }
  // ...
}, { // 두번째 인자값입니다.
  guards: {
    isAvaliablePasswordLength: (context, event) => {
      return event.data?.password.length > 7;
    }
  }
});

export const fetchMachine = createMachine({
  // ...
  states: {
    idle: {
      // idle과 계층 구조로 하위에 에러 관리를 위한 state를 추가합니다.
      states: {
        noError: {},
        errors: { // 계층 구조가 필요하면 한 번 더 nested 할 수 있습니다.
          states: {
            tooShort: {}
          }
        }
      },
      // ...
      on: {
        UPDATE_PASSWORD: [{
          target: '.errors.tooShort',
          cond: 'isPasswordShort',
          actions: 'cachePassword',
        }, {
          target: '.noError',
          actions: 'cachePassword',
        }],
        FETCHING: {
          target: 'loading',
        }]
      },
  }
}, {
  actions: { // actions에 호출되는 함수들을 config로 관리하도록 변경했습니다.
    cachePassword: assign((context, event) => ({
      password: event.data?.password,
    }))
  },
  guards: {
    isPasswordShort: (context, event) => {
      return event.data?.password.length < 8;
    }
  }
}

});
// ... 후략

// component.tsx

// const isDisabled = state.matches('loading') || fetchMachine.transition(state, 'FETCHING').changed;
const isDisabled = [{ idle: 'errors' }, 'loading' ].some(state.matches);

return(
  // ...
  {state.matches('idle.errors') &&
  (<>
    {state.matches('idle.errors.tooShort') && <p>비밀번호는 8자 이상이어야 합니다.</p>}
  </>)}
);

const fileMachine = createMachine({
  // ...
  type: 'parallel',
  // initial: '??' <- 병렬 상태의 값의 초기화는 각각의 병렬 상태에서 진행
  states: {
    upload: {
      inital: 'idle',
    },
    download: {
      inital: 'idle',
    },
  },  
});

export const fetchMachine = createMachine({
  states: {
    idle: {
      type: 'parallel', // 추가 및 하위 id, password 에러 상태를 병렬로 구성
      states: {
        id: {
          initial: 'noError',
          states: {
            noError: {},
            errors: {
              states: {
                empty: {}
              }
            }
          }
        },
        password: {
          initial: 'noError',
          states: {
            noError: {},
            errors: {
              states: {
                empty: {},
                tooShort: {}
              }
            }
          }
        }
      }
    },
    on: {
      UPDATE_ID: [
        { // 상태는 idle 내부의 id, password 병렬 상태로 구성되기 때문에 .id로 표현
          target: '.id.errors.empty',
          cond: 'isInputIdEmpty',
          actions: 'cacheId'
        },
        {
          target: '.id.noError',
          actions: 'cacheId'
        }],
      UPDATE_PASSWORD: [
        {
          target: '.password.errors.empty',
          cond: 'isInputPasswordEmpty',
          actions: 'cachePassword'
        },
        {
          target: '.password.errors.tooShort',
          cond: 'isInputPasswordShort',
          actions: 'cachePassword'
        },
        {
          target: '.password.noError',
          actions: 'cachePassword'
        }
      ],
      FETCHING: [
        { // 유효성 검사를 fetching 이벤트가 발생할 때도 추가하였습니다.
          target: '.id.errors.empty',
          cond: 'isContextIdEmpty'
        },
        {
          target: '.password.errors.empty',
          cond: 'isContextPasswordEmpty'
        },
        {
          target: '.password.errors.tooShort',
          cond: 'isContextPasswordShort'
        },
        {
          target: 'loading'
        }]
    },
  }
},{
  guards: { // guards에는 context와 event를 구분 짓게 나눠보았습니다.
    isContextIdEmpty: (context, event) => {
      return context.id?.length === 0;
    },
    isInputIdEmpty: (context, event) => {
      return event.data?.id.length === 0;
    },
    // ... 위 함수들을 비슷하게 추가
  }
});

// component

// 에러에 대한 구분을 'id.errors'와 'password.errors'로 세분화합니다.
const isDisabled = [{ idle: 'id.errors' }, { idle: 'password.errors' },
 'loading'].some(state.matches);
}

return (
  // ...
  // 에러는 아래처럼 추가합니다.
  {state.matches('idle.id.errors') &&
  (<>
    {state.matches('idle.id.errors.empty') && <p>아이디 값이 없습니다.</p>}
   </>)}
   {state.matches('idle.password.errors') &&
   (<>
     {state.matches('idle.password.errors.tooShort') && <p>비밀번호는 8자 이상이어야 합니다.</p>}
     {state.matches('idle.password.errors.empty') && <p>비밀번호 값이 없습니다.</p>}
    </>)
  }
)

// deep history
const spaceHeaterMachine = Machine({
  id: 'spaceHeater',
  initial: 'poweredOff',
  states: {
    poweredOff: {
      on: { TOGGLE_POWER: 'poweredOn.hist' },
    },
    poweredOn: {
      on: { TOGGLE_POWER: 'poweredOff' },
      type: 'parallel',
      states: {
        heated: {
          initial: 'lowHeat',
          states: {
            lowHeat: {
              on: { TOGGLE_HEAT: 'lowHeat' },
            },
            highHeat: {
              on: { TOGGLE_HEAT: 'highHeat' },
            },
          },
        },
        oscillation: {
          initial: 'disabled',
          states: {
            disabled: {
              on: { TOGGLE_OSC: 'enabled' },
            },
            enabled: {
              on: { TOGGLE_OSC: 'disabled' },
            },
          },
        },
        hist: {
          type: 'history',
          history: 'deep',
        },
      },
    },
  },
})

export const snackbarMachine = Machine(
  {
    id: "snackbar",
    initial: "invisible",
    context: {
      severity: undefined,
      message: undefined,
    },
    states: {
      invisible: {
        entry: "resetSnackbar",
        on: { SHOW: "visible" },
      },
      visible: {
        entry: "setSnackbar",
        on: { HIDE: "invisible" },
        after: {
          // after 3 seconds, transition to invisible
          3000: "invisible",
        },
      },
    },
  },
  {
    actions: {
      setSnackbar: assign((ctx, event: any) => ({
        severity: event.severity,
        message: event.message,
      })),
      resetSnackbar: assign((ctx, event: any) => ({
        severity: undefined,
        message: undefined,
      })),
    },
  }
);