* 발표 자료 meguro.es # 22

자기 소개

주식회사opt고급엔지니어@sisisin

GitHub

Twitter

앞잡이로 위장하고 다양한 일을 했다

현재 AWS/Rails/React 제품의 기술 리더, 사내 컨설팅 창구 등

typeless 집이라서 시끄러워

덕후족이 몇 명이냐면요.
이만큼

이 발표의 구상 대상자

레드ux의 디자인에 골치 아팠다

React의 hooks API

를 알고 있음

이른바 typeless

redux+redux-observable에 상태 관리를 위한 프로그램 라이브러리 쓰기

TypeScript는 유형 설명 없이 자연스럽게 유형 보안을 유지하는 우호적인 코드입니다

hooks를 사용하여 State 또는 Action에 쉽게 불을 붙일 수 있는 메커니즘 제공

개인의 느낌으로 볼 때 React는 규모가 큰 사람이다.use Reducter 같은 것들

앞서 쓴 소개문: typeless React용 상태 관리 라이브러리

오늘 전하고 싶은 거.

typeless에서 독립된 Store 구축을 전제로 하는 API

제공

과 반대로 스토어와 Component를 밀접하게 결합시키는 디자인

도 쉽다

이 조합을 통해 행동거지와 외관을 한 조로 하는 Component를 구축하기 쉽다

다시 말하면 "Redux가 가지지 않도록Component의state로서 행동거지의 복잡한 처리가 상태관리 라이브러리 측에 접근하도록 정의할 수 있다"

*"Store"에 대한 의미
Store를 "Action Action Action Application Reducter에 따라 새로운 State 기능 제작"으로 설정합니다.

Redux, NgRx, Vuex에서 사용된 Store의 직접적인 대응 구상

typeless의 경우 Reducter뿐만 아니라 epic라는 부작용 처리 등 여기서 말하는 스토어와는 다소 다르지만 편의를 위해 스토어라는 단어로 스토어에 해당하는 기능에 대해 이야기한다

typeless는 독립형 Store 구축을 전제로 하는 API 제공

실사자의 임의의 시간에 스토어의'발매된 동작에 Reduction을 적용하여 새로운 State를 만들 수 있다'는 동작을 효과적이고 무효하게 제어할 수 있다

유효성 함수를 React hooks로 제공

useHogeModule()처럼 실행하면 유효화

위 구성 요소를 제거한 경우 비활성화

typeless는 독립형 Store 구축을 전제로 하는 API 제공

(그림)
예를 들어 aReducer만 유효화bReducer하면 어떤 동작aReducer이 있어도 하지 않는다.

이로부터 누릴 수 있는 이점

Store는 분할 통치를 전제로 필요할 때 필요한 응용 행위를 기술할 수 있다

모든 동작은 항상 모든 Reducter를 통과합니다. 어떤 동작에 대해 상태를 업데이트합니까?이러면 걱정 안 해도 돼요.

Redux에서 모든 Reducter는 모든 동작에 대한 행위를 설명할 수 있기 때문에 제어가 어려워질 수 있습니다

그런 문제를 피할 수 있다

Store와 Component를 결합한 설계도 간편해졌습니다.

이것은 상술한 설명에서 기술한 "유효화 함수를 React hooks로 제공한다"를 통해 실현된 것이다
즉, "특정 Component와 특정 Store는 한 그룹"으로 다음과 같이 기술할 수 있습니다.

const HogeModule = () => {
  useHogeModule();
  return <HogeView />
};

이로부터 누릴 수 있는 이점

Component 실질과 밀접하게 결합된 논리를 하나의 집합으로 정의

예를 들어'SPA에서 각 단점에 대응하는 RootComponent의 스토어'라는 표현은 매우 쉽다.

이 자체가 레드룩스라는 말이 있지만 connect의 Component를 물어뜯었죠

이 조합을 통해 행동거지와 외모를 하나의 세트로 하는 Component를 구축하기 쉽다

typeless에서 독립된 Store 구축을 전제로 하는 API

제공

Store와 Component를 결합하는 편리한 설계

이 두 가지 특징의 조합을 통해 행동거지와 외모를 한 조로 하는 Component를 구축하기 쉽다

이로부터 누릴 수 있는 이점

Redux가 가지지 못하도록Component의state로 행동거지의 복잡한 처리를 상태 관리 라이브러리 측에 접근할 수 있음

Store와Component를 밀접하게 결합한 논리를 typeless 옆에 써서 처리와 복사를 편리하게 하는 방법이 좋다

'행동거지가 좀 복잡한 알갱이 컴퍼니'를 아주 간단하게 표현할 수 있다는 게 너무 좋은 것 같아요.

이 디자인이 있어서 대충 빠져있는 사례 소개.

장서 관리 프로그램

보관소: https://github.com/opt-tech/bibliotheca-pwa
이거 뭐야?

관리사 도서임대 응용 프로그램

예를 들어 카메라에서 책을 읽는 바코드는'빌린다','돌려준다'

바코드에서 읽을 수 있는 관리 기능으로 쓰이는 서적

도 등록할 수 있다

등

데모

장서 관리 프로그램

'카메라로 책 바코드 읽기'부분은 스토어와 컴포니트 1세트bReducer로 표현했다.

BarcodeLoader Module에서 하는 일

장치가 카메라를 사용할 수 있는지 여부

버튼을 눌러 카메라를 효율화

바코드를 취득한 후payload에 바코드가 있는 숫자BarcodeLoaderModuleAction에서 불이 났다

예를 들어 로그인 화면에서 수신emitBarcode하여 책 정보를 얻고 책 정보를 표에 기입한다.
대여 화면이면 emitBarcode 서적 정보를 받아 대여 대상인 책을 확인할 수 있다
이러한 실현

끝맺다

그래서'typeless로 시작된 응용 프로그램의 상태의 분할 통치'
여기 소개된 것 외에도 아주 훌륭한 점이 많으니 관심 있으신 분들은 꼭 사용해 주세요.

Happy Hacking!