try Undux but...

I tryed Undux of state management but Redux is better that.

Transcript

1. ReduxʹർΕͨͷͰ UnduxΛૉৼΓͯ͠Έͨ Osaka Mix Leap Study #23 React Nativeษڧձ @tatsushitoji
2. Who am I ? • @tatsushitoji • σβΠϯࣄ຿ॴɺήʔϜձࣾɺweb੍࡞ձ ࣾɺ௚ۙͰ͸ιʔγϟϧϩάΠϯͳͲΛఏڙ ͢ΔࣄۀձࣾΛܦͯɺݱࡏ͸ɺwebࣄۀҎ֎ ͷۀछΛபͱͨ͠ձࣾͰwebࣄۀͷ্ཱͪ͛ Λߦ͍ͬͯ·͢
3. Dead simple state management for React
4. 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
5. 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
6. 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
7. 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> ))
8. ͔ͨ͠ʹγϯϓϧ͕ͩεέʔϧ ͢Δ…ʁ • storeΛ·Δ͝ͱίϯϙʔωϯτʹͭͬ͜Ήͱ ͍͏உؾ͋;ΕΔେ୾ͳઃܭ • view ଆ(presentational Component)ʹ੹຿͕ ৭ʑͱ΍ͬͯ͘Δ
9. ΍ͬͯΈͨ • storeUpdaterͷ෼཭ • Store Λඞཁͳ෼͚ͩϚοϐϯά
10. ຐվ଄… 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)
11. • mapProps Ͱ react-redux ͷ mapStateToProps ʹ͍ۙ͜ͱΛ΍͍ͬͯΔ • WithHandlers Ͱ react-redux ͷ mapDispatchToProps ʹ͍ۙ͜ͱΛ΍͍ͬͯΔ • ܕͭΒ͍ • Redux ࢖͑͹͍͍ͷͰ͸…ʁ
12. ReduxʹർΕͨͷͰ UnduxΛૉৼΓͯ͠Έͨ…
13. ݁Ռɺ ෳ਺ਓ։ൃɺ·ͨ͸͋Δఔ౓ن໛Ҏ্ ͕૝ఆ͞ΕΔΞϓϦέʔγϣϯͷঢ়ଶ ؅ཧʹ͓͍ͯ͸ Redux ͷ store ͷ mutaion ͷઃܭͱ react-redux ͷ connect ͸ڞ௨ೝࣝͱͯ࣋ͪ͠΍͍͢ ͠ɺducks ͳσΟϨΫτϦߏ੒ʹ͢Ε ͹ϑΝΠϧҠಈͷΦʔόʔϔου΋཈͑ ΒΕΔ͠… ͦ΋ͦ΋ɺReduxʹർΕͯͳͲ͍ͳ͍
14. ϦϙδτϦ • https://github.com/tatsushitoji/cra-redux • https://github.com/tatsushitoji/cra-undux ※ feat/optimize-connect ϒϥϯνͰ͋Δఔ౓·Ͱͷ࠷దԽΛ΍͍ͬͯ·͢
15. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠