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
270
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
84
そろそろGraphQLの話をしよう
tatsushitoji
1
270
Our favorite Dependency updates has been deprived
tatsushitoji
2
460
Other Decks in Programming
See All in Programming
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
340
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
880
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
5つのアンチパターンから学ぶLT設計
narihara
1
170
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
72
4.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Pragmatic Product Professional
lauravandoore
35
6.7k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Writing Fast Ruby
sferik
628
62k
For a Future-Friendly Web
brad_frost
179
9.8k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
RailsConf 2023
tenderlove
30
1.1k
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 ϒϥϯνͰ͋Δఔ·Ͱͷ࠷దԽΛ͍ͬͯ·͢
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠