![Action
Creator
Store
Reducer
Components
pass
state
interaction
Comp
Comp Comp
pass
state
pass
props
dispatch
type S = {
+messages: $ReadOnlyArray<string>
};
const initialState: S = {
messages: [＾hello!￣]
};
// Error
initialState.messages.push(＾hi￣);](https://image.slidesharecdn.com/whatwestreamlinedbyimplementingflowtypeintoreact-171006062421/85/React-flowtype-15-320.jpg)
![[GrapeCity Web TECH FORUM 2018]レガシ`からの卞佩 - 幄塀氏芙晩云プロテック](https://cdn.slidesharecdn.com/ss_thumbnails/grapecitywebtechforum2018npc-181226045503-thumbnail.jpg?width=560&fit=bounds)
More Related Content
Similar to 檎艶温界岳に韓鉛看敬岳霞沿艶を怏み栽わせることで、厘？は採をSにできたか (20)
More from LINE Corporation (20)
檎艶温界岳に韓鉛看敬岳霞沿艶を怏み栽わせることで、厘？は採をSにできたか
- 3. 徭失B初 致圻 澱 (@h_demon) LINE Fukuoka幄塀氏芙 _k片 UITチ`ム フロントエンド畠違を毅輝。 Iタ`ンで2定念に牽に栖ました。
- 4. ? 厘？は採に逗困靴討い燭里 ? Flowtypeでどの^殻が 隠^できるのか ? まとめ Agenda
- 5. 厘？は採に逗困靴討い燭里 ? 參念、React + Fluxの寄ﾄｉ_kで払 ? }方鮫中のモバイル喘Webアプリ。 ? o泙砲任襯丱 ? そもそも咾ない ? UIが篤`する ? APIがエラ`を卦す
- 6. Business Logic 厘？は採に逗困靴討い燭里 Web API Client-side Storage UI UI Web API Client-side Storage
- 7. Business Logic 厘？は採に逗困靴討い燭里 Web API Client-side Storage UI UI Web API Client-side Storage
- 8. Business Logic 厘？は採に逗困靴討い燭里 Web API Client-side Storage UI UI Web API Client-side Storage
- 9. Business Logic 厘？は採に逗困靴討い燭里 Web API Client-side Storage UI UI Web API Client-side Storage
- 10. 書指恬ったチャットツ`ルの撹 ? １鮫中だけのWebチャットクライアント ? React + Flux Utils ? ReduxLのO ? Single State ? Reducerはstateを鞭け函り、stateを卦す
- 12. Action Creator Store Reducer Components pass state interaction Comp Comp Comp pass state pass props dispatch type P = { text: string }; const MyComponent = (props: P) => <div>{props.text}</div>;
- 13. Action Creator Store Reducer Components pass state interaction Comp Comp Comp pass state pass props dispatch type S = { /* Stateの侏を協x */ }; type A = { /* Actionの侏を協x */ }; const someReducer = (state: S, action: A): S => { // 仟しいstateを恬って卦す return newState; };
- 14. Action Creator Store Reducer Components pass state interaction Comp Comp Comp pass state pass props dispatch type A = { type: ＾add￣, payload: {´} } | { type: ＾remove￣, payload: {´} }; ´ // action: Aで局されたとする if (action.type == ＾remove￣) { // ＾add￣のpayloadを念戻にしたコ`ド }
- 15. Action Creator Store Reducer Components pass state interaction Comp Comp Comp pass state pass props dispatch type S = { +messages: $ReadOnlyArray<string> }; const initialState: S = { messages: [＾hello!￣] }; // Error initialState.messages.push(＾hi￣);
- 16. まとめ ? Flowtypeでg佩rエラ`を契ぐのがSに。 ? Fluxor Reduxのフロ`の謹くの何蛍は、 Flowtypeで床議に侏の屁栽來が隠^できる。 ? できない何蛍もある
- 17. Thank you
Editor's Notes
- #5: 暴は書指、LINE媼いというプロジェクトでgなチャットツ`ルを恬りました。 そのツ`ルのは
- #6: まず書指のk燕の嘘尚をおします。 參念暴は、あるサ`ビスでReactとFluxの寄ﾄｉ_kをUYしました。それはモバイル喘のWebサ`ビスで、トップ鮫中があり、コンテンツの鮫中があり、秤鵑鯣訌Δ垢襯侫`ムの鮫中があり、というようなよくある撹のサ`ビスです。 わりと寄きなﾄのサ`ビスだったのですが、 圻咀としては、 蒙にあるエンジニアが毅輝する鮫中から、eのエンジニアが毅輝する鮫中へ、クライアント箸杷鵑魘匹垢茲Δ中で謹くバグがでました。
- #7: この周をもっと渇鷸してみたいと房います。 クライアントをビジネスロジックにする秤鵑糧覲薦というQ泣から渇鷸すると、こんな蹐杯h苧できると房います。 秘薦と竃薦ともに麼に2つのNが深えられます。UIと、Web API Client-side Storageです。これは麼に、UIとしてえるものかそうでないか、というQ泣で蛍けています。
- #8: 強かない、というのはいろんなパタ`ンがありますが、雨鴛が宙鮫されない、篤媽するというのは謹いと房います。
- #9: また、サ`バがバリデ`ションエラ`を卦すこともあるでしょう。それはビジネスロジック蚊の竃薦が、粥永鴛が勣箔する秘薦の訳周に栽崑していないことで軟きます。
- #10: また、ビジネスロジック咾琳个g佩rエラ`が軟きるということもあるでしょう。 採が冱いたいかというと、謹くの栽はこのような勣殆揖平の秘竃薦の勣箔が栽崑しないときに、サ`ビスが峭まるような}が軟こりうるということです。