Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
try Undux but...
Search
tt
September 19, 2018
Programming
0
280
try Undux but...
I tryed Undux of state management but Redux is better that.
tt
September 19, 2018
Tweet
Share
More Decks by tt
See All by tt
戦略的なフロントエンドテストを実施するために
tatsushitoji
0
93
そろそろGraphQLの話をしよう
tatsushitoji
1
280
Our favorite Dependency updates has been deprived
tatsushitoji
2
480
Other Decks in Programming
See All in Programming
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
430
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
470
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
780
CSC509 Lecture 05
javiergs
PRO
0
300
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
370
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
690
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.3k
止められない医療アプリ、そっと Swift 6 へ
medley
1
160
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2.1k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
1k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
A Tale of Four Properties
chriscoyier
161
23k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Documentation Writing (for coders)
carmenintech
75
5k
How to Think Like a Performance Engineer
csswizardry
27
2k
KATA
mclloyd
32
15k
Navigating Team Friction
lara
190
15k
Six Lessons from altMBA
skipperchong
28
4k
Designing for Performance
lara
610
69k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Transcript
ReduxʹർΕͨͷͰ UnduxΛૉৼΓͯ͠Έͨ Osaka Mix Leap Study #23 React Nativeษڧձ @tatsushitoji
Who am I ? • @tatsushitoji • σβΠϯࣄॴɺήʔϜձࣾɺweb੍࡞ձ ࣾɺۙͰιʔγϟϧϩάΠϯͳͲΛఏڙ ͢ΔࣄۀձࣾΛܦͯɺݱࡏɺwebࣄۀҎ֎
ͷۀछΛபͱͨ͠ձࣾͰwebࣄۀͷ্ཱͪ͛ Λߦ͍ͬͯ·͢
Dead simple state management for React
storeΛ࡞ import { createConnectedStore } from 'undux' import { initialCounterState
} from './modules/counter' export const store = createConnectedStore({ ...initialCounterState, }) import { createStore, combineReducers } from 'redux' import { counterReducer } from ‘./modules/counter' export const store = createStore( combineReducers({ counter: counterReducer, }), ) 6OEVY 3FEVY
ContainerͰϥοϓ͢Δ import Store from './store' import { Counter } from
'./components/counter' import registerServiceWorker from './registerServiceWorker' ReactDOM.render( <Store.Container> <Counter /> </Store.Container>, document.getElementById('root') import { store } from './store' import { Container as Counter } from './containers/counter' ReactDOM.render( <Provider store={store}> <Counter /> </Provider>, document.getElementById('root') ) 6OEVY 3FEVY
connect͢Δ import * as React from 'react' import { withStore
} from '../../store' export const Counter = withStore(({ store }) => ( <> … </> )) import { connect } from 'react-redux' import { Counter } from '../../components/counter' export const Container = connect(state => state)(Counter) 6OEVY 3FEVY
Dead Simple ! import * as React from 'react' import
{ withStore } from '../../store' export const Counter = withStore(({ store }) => ( <div> <p>count: {store.get('countValue')}</p> <button onClick={() => store.set('countValue')(store.get('countValue') + 1)}>Increment</button> <button onClick={() => store.set('countValue')(store.get('countValue') - 1)}>Decrement</button> <button onClick={() => store.set('countValue')(0)}>Reset</button> </div> ))
͔ͨ͠ʹγϯϓϧ͕ͩεέʔϧ ͢Δ…ʁ • storeΛ·Δ͝ͱίϯϙʔωϯτʹͭͬ͜Ήͱ ͍͏உؾ͋;ΕΔେͳઃܭ • view ଆ(presentational Component)ʹ͕ ৭ʑͱͬͯ͘Δ
ͬͯΈͨ • storeUpdaterͷ • Store Λඞཁͳ͚ͩϚοϐϯά
ຐվ… export const Counter = compose( withStore, withHandlers({ onIncrement: ({
store }) => () => store.set('countValue')(store.get('countValue') + 1), onDecrement: ({ store }) => () => store.set('countValue')(store.get('countValue') - 1), onReset: ({ store }) => () => store.set('countValue')(0), }), mapProps(({ store, onIncrement, onReset, onDecrement }) => ({ onIncrement, onDecrement, onReset, countValue: store.get('countValue'), })), )(Component)
• mapProps Ͱ react-redux ͷ mapStateToProps ʹ͍ۙ͜ͱΛ͍ͬͯΔ • WithHandlers Ͱ
react-redux ͷ mapDispatchToProps ʹ͍ۙ͜ͱΛ͍ͬͯΔ • ܕͭΒ͍ • Redux ͍͍͑ͷͰ…ʁ
ReduxʹർΕͨͷͰ UnduxΛૉৼΓͯ͠Έͨ…
݁Ռɺ ෳਓ։ൃɺ·ͨ͋ΔఔنҎ্ ͕ఆ͞ΕΔΞϓϦέʔγϣϯͷঢ়ଶ ཧʹ͓͍ͯ Redux ͷ store ͷ mutaion ͷઃܭͱ
react-redux ͷ connect ڞ௨ೝࣝͱ͍ͯ࣋ͪ͢͠ ͠ɺducks ͳσΟϨΫτϦߏʹ͢Ε ϑΝΠϧҠಈͷΦʔόʔϔου͑ ΒΕΔ͠… ͦͦɺReduxʹർΕͯͳͲ͍ͳ͍
ϦϙδτϦ • https://github.com/tatsushitoji/cra-redux • https://github.com/tatsushitoji/cra-undux ※ feat/optimize-connect ϒϥϯνͰ͋Δఔ·Ͱͷ࠷దԽΛ͍ͬͯ·͢
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠