BdashにおけるFlux設計

 BdashにおけるFlux設計

18b12f8f7910445b2637f0f21f59d467?s=128

Kazuhito Hokamura

May 10, 2017
Tweet

Transcript

  1. Bdashʹ͓͚ΔFluxઃܭ

  2. @hokaccha

  3. None
  4. None
  5. Bdash • Electron੡ͷσεΫτοϓΞϓϦέʔγϣϯ • BIπʔϧͬΆ͍΋ͷ • View͸શͯReact

  6. BdashͷFluxઃܭʹ͍ͭͯ

  7. • FluxϑϨʔϜϫʔΫະ࢖༻ • ࠷దͳઃܭΛࣗ෼Ͱߟ͑ͳ͕Β࣮૷͍ͯͬͨ͠

  8. Domain Logicͷݺͼग़͠

  9. Domain Logic • ඳըʹؔ͢Δ͜ͱҎ֎ͷશͯͷॲཧ • Databaseͱͷ΍ΓऔΓͱ͔ • APIݺͼग़͠ͱ͔ • ઃఆͷ؅ཧͱ͔

  10. Ͳ͜ʹ͋Δ΂͖͔ • Store? • Actino Creator? • Middleware?

  11. None
  12. import { dispatch } from './QueryStore'; import Database from '../lib/Database';

    const QueryAction = {}; QueryAction.addNewQuery = params => { Database.Query.create(params).then(query => { dispatch('addNewQuery', { query }); }); }; Action Creator 㲗 Domain Logic
  13. • Domain LogicΛFluxͷϑϩʔ͔Β෼཭͢Δ • Action Creator͔Β͸ݺͼग़͚ͩ͢ • Store͸Stateͷߋ৽͚ͩʹ஫ྗ͢Δ

  14. • StoreͱDomain Logic͸ςετ͠΍͘͢ͳΔ • Action Creator͕ςετͮ͠Β͍ • શ͕ͯPure functionͱ͍͏ͷ͸ݬ૝ͳͷͰఘΊΔ

  15. Storeͷ෼ׂ

  16. ͭ·ΓStateΛͲ͏෼ׂ͢Δ͔

  17. facebook/flux • Ϧιʔεʁ͝ͱʹStoreΛ෼ׂ͢Δ • DispatcherʹΑΔަ௨੔ཧɺwaitForΛ࢖ͬͨ ґଘͷղܾ͕ඞཁ

  18. Redux • StoreΛ෼ׂ͠ͳ͍ʢSingle Stateʣ • StateΛߋ৽͢ΔॲཧʢreducerʣΛ෼ׂ͢Δ • waitFor΍Dispatcher͕ෆཁ • State͕ڊେʹͳΔ

  19. Bdash • Page୯ҐͰ෼͚ͯΈͨ • Page͝ͱʹಠཱͨ͠StoreΛ࣋ͭ • Page == Container Component

  20. None
  21. • Storeಉ࢜ͷґଘ͕ͳ͍ • waitFor΋Dispatcher΋ෆཁ • StateΛΘ͔Γ΍ཻ͍͢౓Ͱ෼ׂͰ͖Δ Good

  22. • PageΛ·͍ͨͩσʔλͷڞ༗͕໘౗ • ෳ਺ͷPageͰಉ͡σʔλΛ࣋ͭ͜ͱ΋͋Δͷ Ͱແବ͕͋Δ Bad

  23. PageؒͰͷσʔλڞ༗ • PageؒͰڞ༗͢Δσʔλ͸Domain Logic૚ʹετΞ͢Δ • Page੾Γସ͑࣌ʹຖճDomain Logic૚͔ΒऔΓ௚͢ • αʔόʔαΠυͷ։ൃͱ͍ۙײ֮

  24. ൚༻తͳઃܭͰ͸ͳ͍ ⚠

  25. ΞϓϦέʔγϣϯʹ
 దͨ͠ઃܭΛɻ

  26. ൓ল఺

  27. • ଞʹ΋ಠࣗͷઃܭɾ࣮૷͕͍͔ͭ͋͘Δ • ίϯτϦϏϡʔγϣϯͷෑډ͕ߴ͘ͳΔ • Ϩʔϧʹ৐ͬͨ΄͏͕ઃܭࢥ૝Λڞ༗͢Δ
 ίετ͕ݮΔ

  28. Α͔ͬͨ

  29. • ݸਓతʹ͸͖Ε͍ʹઃܭͰ͖ͯຬ଍ • ઃܭΛߟ͑Δͷ͸ษڧʹͳΔ

  30. Thanks.