typescript-fsa

왜 @m0a씨를 지켜야 하는지 이 문장 이해하기 쉽습니다.
FSA는 누구입니까여기.
이 글은 typescript-fsa가 만든 액션을 설명합니다.

동작 만들기

액션을 하려면 먼저 해야 한다actionCreator

import actionCreatorFactory from 'typescript-fsa'

const actionCreator = actionCreatorFacory()

여기서부터 액션을 정의합니다.

// typeが'HogeAction'かつpayloadの型がstringなFSA
const hogeAction = actionCreator<string>('hogeAction')
hogeAction.type
// 'hogeAction'
hogeAction('a')
// { type: 'hogeAction', payload: 'a' }

// payloadには型チェックが入る
hogeAction(1)
// error TS2345: Argument of type '1' is not assignable to parameter of type 'string'.

// payload無し
const hugaAction = actionCreator<void>('hugaAction')
const piyoAction = actionCreator('piyoAction')

// error
const errorAction = actionCreator<Error>('errorAction')
errorAction(new Error('hoge')) 
// {
//   type: 'errorAction',
//   payload: Error: hoge
//       at /home/kc5m/src/localhost/kc5m/fsa-saga-sample/[eval].ts:1:13
//       // 省略
//   error: true  // Error型を渡すと自動的に{error: true}が付与される(条件変更可)
// }

비동기 동작 만들기

typescript-fsa 또한 API를 제공하여 비동기 처리에 좋은 비동기 조작을 제공한다.AsyncActionCreator(AAC).
실제로 AAC를 정의해 보세요.

// AAC定義
const hogeAsyncAction = actionCreator.async<string, number, Error>('hogeAsyncAction')

actionCreator.async(),Params,Result,Error(javascript의Error 유형과 다른) 세 가지 유형에서 생성started,done,failed,string 세 가지 동작(FSA).
위의 예에서 Params은number, Result은Error, Error은started에 해당한다.
생성된 세 가지 작업은 비동기식 작업에 사용됩니다.예를 들어, 다음과 같은 비동기 함수가 있다고 가정합니다.

const f = async (params: string): Promise<number> {
  const result = await someAsyncFunc(pars)
  if (!result) {
    throw new Error('error')
  }
  return 0
}

f()는 집행done의 정시, returnfailed의 정시, throwstarted의 정시이다.
그러면 이 AAC는 일반적인 동작이 아니기 때문에 동작으로 직접 사용할 수 없습니다.

hogeAsyncAction('aaa')
// error TS2349: This expression is not callable.

따라서 AAC 내property에서 생성된 동작을 사용해야 합니다.

// started
hogeAsyncAction.started('a')
// { type: 'hogeAsyncAction_STARTED', payload: 'a' }

done와 마찬가지로 failed과done를 사용하면 error가 발생합니다.

// done
hogeAsyhogeAsyncAction.done(2)
// error TS2345: Argument of type '2' is not assignable to parameter of type '{ params: string; } & { result: number; }'.

// failed
hogeAsyhogeAsyncAction.failed(new Error('hoge'))
// error TS2345: Argument of type 'Error' is not assignable to parameter of type '{ params: string; } & { error: Error; }'.

AAC에서 제작한failed,started의payload 유형이 확장되었고payload에는 done의payload가 포함되어 있습니다.
위의 예에서 error에도 { params: string } & { result: number }형은 failed형이고 { params: string } & { error: Error }형은 actionCreator.async<Params, Result, Error>()형이라고 쓰여 있다.

hogeAsyncAction.done({ params: 'a', result: 1 })
// { type: 'hogeAsyncAction_DONE', payload: { params: 'a', result: 1 }}

hogeAsyncAction.failed({ params: 'a', error: new Error('aaa') })
// {
//   type: 'hogeAsyncAction_FAILED',
//   payload: {
//     error: Error: aaa
//         at /home/kc5m/src/localhost/kc5m/fsa-saga-sample/[eval].ts:1:33
//         // 省略
//     params: 'a'
//   },
//   error: true
// }

총결산은 아래와 같다.started의action의payload 유형

Params : done

{ params: Params } & { result: Result } : failed

{ params: Params } & { error: Error } : done

또 Result형Error이 와도 new Error()가 되지 않는다.error: true은FAILED, Error형 이외의 사람이 와도 Error.

const fugaAsyncAction = actionCreator.async<string, Error, string>('fugaAsyncAction')
fugaAsyncAction.done({result: new Error('aaa'), params: 'a'})
// {
//   type: 'fugaAsyncAction_DONE',
//   payload: {
//     result: Error: aaa
//         at /home/kc5m/src/localhost/kc5m/fsa-saga-sample/[eval].ts:1:32
//         // 省略
//     params: 'a'
//   }
// }

fugaAsyncAction.failed({error: 'a', params: 'a'})
// {
//   type: 'fugaAsyncAction_FAILED',
//   payload: { error: 'a', params: 'a' },
//   error: true
// }

마지막

error: true를 사용하여 유형 검사를 실행하는 FSA에 대한 정의와 비동기식 처리를 위해 보다 적은 행으로 여러 FSA를 정의할 수 있습니다.
이 항목만 사용해도 편리하지만, 같은 작성자가 제공한 다음 Companion Packages를 동시에 사용하면 더욱 편리하게 사용할 수 있습니다(링크 생략).

typescript-fsa

typescript-fsa-redux-saga

typescript-fsa-redux-observable

typescript-fsa-redux-thunk

이상