Why Redux?

社内LT大会用のスライドです。Reduxの紹介。

Transcript

1. Why Redux? @maechabin http://redux.js.org/
2. Reduxͱ͸ʁ • WebΞϓϦέʔγϣϯΛߏங͢ΔΞϓϩʔνͷͻͱͭʢঢ়ଶ Λ؅ཧ͢ΔͨΊͷϑϨʔϜϫʔΫʣ • ࡞ऀ͸Dan Abramovࢯ@Facebook • Facebookͷఏএ͢ΔFluxΞʔΩςΫνϟͷӨڹΛड͚͍ͯΔ • ࠷ॳ͸FluxϑϨʔϜϫʔΫͷͻͱͭʹ͗͢ͳ͔͕ͬͨɺݱࡏ ͸Ұਓউͪঢ়ଶ • ΫϩεϓϥοτϑΥʔϜʹ΋ରԠʢΫϥΠΞϯτ / αʔόʔ / ωΠςΟϒͰ΋ಈ͘ʣ • Reactͷঢ়ଶΛ؅ཧ͢ΔͨΊʹηοτͰ࢖ΘΕΔ͜ͱ͕ଟ͍ • GitHubͷελʔ਺͸23,663ʢ2016೥9݄30೔ݱࡏʣ
3. Reduxͷ࢓૊Έ • σʔλ͸Ұํ޲ʹ͔͠ྲྀΕͳ͍ • ActionɺReducerɺStoreͷ3ͭͷ෦෼͔ Βߏ੒͞ΕΔ • Store͸1ͭͷΞϓϦέʔγϣϯʹඞͣ1 ͭ • Store͸ΞϓϦέʔγϣϯશମͷঢ়ଶ ʢStateʣΛObjectπϦʔͱͯ͠อ࣋ • ঢ়ଶʢStateʣ͸Immutable • ঢ়ଶΛʢStateʣΛߋ৽͢Δ།Ұͷํ๏ ͸ɺActionΛൃՐͤ͞Δ͜ͱ • Action͸ΞΫγϣϯ໊ͱঢ়ଶͷ஋Λ࣋ ͬͨ୯ͳΔΦϒδΣΫτ • Reducer͸෭࡞༻ͷͳ͍७ਮͳؔ਺ɻ ݱࡏͷঢ়ଶͱActionΛҾ਺ʹͱΔ
4. Viewͷ࣮૷ • جຊతʹ͸PubSubύλʔϯ • StoreͰ༻ҙ͞Ε͍ͯΔAPIΛ࢖͏ ঢ়ଶʢstateʣ΁ͷΞΫηε ɹɹɹ=> getState()ϝιου ঢ়ଶʢstateʣͷߋ৽ ɹɹɹ=> dispatch(action)ϝιου ϦεφʔΛొ࿥ ɹɹɹ=> subscribe(listener)ϝιου Ϧεφʔͷొ࿥ղআ => subscribe(lstener)ϝιου ɹɹɹɹʹΑͬͯฦ͞Εͨؔ਺ // ActionをReducerに伝播 store.dispatch(actionCreators()); // stateの状態を購読。状態に変化が // あったらリスナーを実行 store.subscribe(() => { /* リスナーの処理を書く */ // stateを取得 store.getState(); }); Viewͷ࣮૷ྫ
5. ReactͰReduxΛ࢖͏ • React͸ViewʹಛԽͨ͠ϥΠϒϥϦͰ͋ΓɺΞϓ Ϧέʔγϣϯͷن໛͕େ͖͘ͳΔͱঢ়ଶͷ؅ཧ ͕ෳࡶʹͳΓɺઃܭ͕೉͘͠ͳΔ͔Β • ReactͷίϯϙʔωϯτؒͷόέπϦϨʔΛճආ ͍͔ͨ͠Β • ༩͑ΒΕͨ஋ʹج͍ͮͯίϯϙʔωϯτ͕Ϩϯμ Ϧϯά͞ΕΔΑ͏ʹͳΔͨΊReactͷςετ͕؆ ୯ʹͳΔ͔Β ReactͰReduxΛ࢖͏ཧ༝
6. ReactͰReduxΛ࢖͏ʹ͸ʁ React-ReduxʢnpmʣΛ࢖ͬͯReactͱ࿈ܞ https://github.com/reactjs/react-redux ࢖͍ํͳͲͷৄࡉ͸ࢲͷϒϩάهࣄΛࢀরʂ ↓ Reduxͷ࣮૷ͱReactͱͷ࿈ܞΛ௒γϯϓϧͳαϯ ϓϧΛ࢖ͬͯղઆ http://mae.chab.in/archives/2885
7. ·ͱΊ • ΞϓϦέʔγϣϯͷঢ়ଶΛͻͱͭͷ৔ॴͰอ ࣋͢ΔͨΊɺঢ়ଶͷ؅ཧָ͕ʹͳΔ • ΞϓϦέʔγϣϯ͕ෳࡶʹͳ͖ͬͯͨͱ͖ͷ εέʔϧ΋Մೳ • ReactͰͷ։ൃ͕ΑΓָ͘͠ͳΔ • ͨͩ͠Viewͷ࣮૷͸ReactͰͳͯ͘΋ྑ͍ • ྲྀߦ͖͍ͬͯͯΔͷͰ͓͍֮͑ͯͯ΋ଛ͸ͳ͠
8. https://github.com/reactjs/redux ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ