Upgrade to Pro — share decks privately, control downloads, hide ads and more …

イカリング2におけるシングルページアプリケーション

cockscomb
October 02, 2017

 イカリング2におけるシングルページアプリケーション

cockscomb

October 02, 2017
Tweet

More Decks by cockscomb

Other Decks in Programming

Transcript

  1. Component Props Component Component Component Component Component Virtual DOM Virtual

    DOM Virtual DOM Props Props 3FBDU w ΞϓϦέʔγϣϯ͸
 $PNQPOFOUͷू߹ମ w $PNQPOFOU͸ೖྗΛݩʹ
 ৽ͨͳ$PNQPOFOUΛग़ྗ͢Δ
 ؔ਺ͱΈͳͤΔ w ࠷ऴతʹ͸%0.$PNQPOFOUΛ ग़ྗ͢Δ
  2. ࣌ࠁ import * as React from 'react'; interface TimeProps {

    time: Date, } export const Time: React.SFC<TimeProps> = ({time}) => { return <time dateTime={time.toISOString()}>{time.toLocaleString()}</time>; };
  3. *NNVUBCMF w 0CKFDUBTTJHO
 const newObj = Object.assign({}, oldObj, { key:

    value }) w 4QSFBE0QFSBUPS
 const newObj = { ...oldObj, key: value } w *NNVUBCMFKT
  4. Store Reducer State Action dispatch subscribe 3FEVY w ୯Ұͷ4UPSFʹશͯͷঢ়ଶ w

    TVCTDSJCFͰมԽΛݕ஌Ͱ͖Δ w 0CTFSWFSύλʔϯ w ঢ়ଶΛม͍͑ͨͱ͖͸
 4UPSFʹ"DUJPOΛૹΔ w 3FEVDFS͕"DUJPOʹԠͯ͡
 ঢ়ଶΛมߋ͢Δ
  5. ࣌ࠁ import * as React from 'react'; interface TimeProps {

    time: Date, } export const Time: React.SFC<TimeProps> = ({time}) => { return <time dateTime={time.toISOString()}>{time.toLocaleString()}</time>; };
  6. ࣌ࠁ import * as React from 'react'; import {connect} from

    'react-redux'; interface TimeProps { time: Date, } const Time: React.SFC<TimeProps> = ({time}) => { return <time dateTime={time.toISOString()}>{time.toLocaleString()}</time>; }; export default connect(state => ({ time: state.time }))(Time);
  7. 3FNPUF3FTPVSDF5 & enum State { EMPTY = "empty", PENDING =

    "pending", RESOLVED = "resolved", FAILED = "failed", } abstract class RemoteResource<T, E> { abstract state: State; abstract latestValue: T | null; abstract error: E | null; }
  8. ࣌ࠁ const updateTime = createAction('UPDATE_TIME',
 (time: Date) => ({ time:

    time })); const timeReducer = handleAction(updateTime,
 (state, action) => action.payload!.time, new Date() ); function * ticktack() { while (true) { yield put(updateTime(new Date())); yield delay(1000); } } function * rootSaga() { yield all([ fork(ticktack), ]); }
  9. ࣌ࠁ const sagaMiddleware = createSagaMiddleware(); const store = createStore( combineReducers({

    time: timeReducer, }), applyMiddleware(sagaMiddleware) ); sagaMiddleware.run(rootSaga);
  10. ࣌ࠁ import * as React from 'react'; import {connect} from

    'react-redux'; interface TimeProps { time: Date, } const Time: React.SFC<TimeProps> = ({time}) => { return <time dateTime={time.toISOString()}>{time.toLocaleString()}</time>; }; export default connect(state => ({ time: state.time }))(Time);
  11. )JTUPSZ w MPDBUJPOʹIJTUPSZTUBUF΋ؚΊΔ w QVTI4UBUFͰIJTUPSZTUBUFʹ௚લ ͷMPDBUJPOΛอଘ͢Δ w IJTUPSZTUBUF͸ʮ໭ΔʯʮਐΉʯ Ͱ෮ݩ͞ΕΔ w

    ৗʹ௚લͷϖʔδ͕ಘΒΕΔ export interface Location { pathname: Pathname; search: Search; state: LocationState; hash: Hash; key: LocationKey; } window.history.pushState({ lastLocation: location, }, "A2", "/a/2");