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
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
710
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
650
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
480
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
820
技術同人誌をMCP Serverにしてみた
74th
1
650
AIともっと楽するE2Eテスト
myohei
6
2.6k
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Building Adaptive Systems
keathley
43
2.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Agile that works and the tools we love
rasmusluckow
329
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Designing Experiences People Love
moore
142
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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 ϒϥϯνͰ͋Δఔ·Ͱͷ࠷దԽΛ͍ͬͯ·͢
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠