実践 Redux Saga -Practical Redux Saga-

  • Published on
    07-Feb-2017

  • View
    135

  • Download
    6

Embed Size (px)

Transcript

1

Redux Saga-Practical Redux Saga-2017/01/27() #21

name: age: 32worksAt: Studio Arcana co.,Ltd.roles: [ Web Application Developer, Management ]twitter: @yossy222 graduated: [ Advanced Institute of Industrial Technology, National Institute of Technology, Kushiro College ]2

Prototype.js/script.aculo.us (2007)YUI Library(2008)jQuery/jQuery UI(2008)Backbone.js(2013)Riot.js(2016)Angular 1(2014)React.js(2014)

3

/

IPA4

hico00

5

6

20177

8

redux-saga 9

Redux Saga

10

Redux Saga11

12

React , Redux , Redux Saga , Apache Cordova , Onsen UI , Sqlite , WebSQL , WebAPI(Ajax) , Webpack , Babel(stage-0), ES6 , Generator(ES6) , Promise(ES6),Gulp, Sass

13

14

jQueryReactFLUXReduxRedux Saga15

16

jQuery

17

jQuery

jQuery18

jQueryDOM19

jQuery

20

HTML

HTML

HTMLDOM

jQuery21

jQueryHTML

API

22

jQueryDOM23

jQueryHTMLHTML24

jQuery.append().appendTo().addClass().attr()

25

jQuery

26

jQueryDOMDOM

CSS27

jQuery28

jQuery

29HTML

jQuery

30HTML

HTML

jQuery

31HTML

HTML

HTML

jQuery

32HTML

HTML

HTML

HTML

jQuery

33HTML

HTML

HTML

HTML

HTML

jQuery

34

jQueryReact35

jQueryReact36

React

37

ReactReactUI38

ReactModel, View, Controller View39

ReactComponent HTMLDOM40

ReactComponentJSXHTMLDOM41

React

42HTML

Component

JSX

Reactclass HelloMessage extends React.Component { render() { return Hello Jane; }}

ReactDOM.render(, mountNode);43ComponentHello JaneHTML

ReactHTMLProps44

React

45HTML

Component

PropsPropsComponentsetterJSX

Reactclass HelloMessage extends React.Component { render() { return Hello {this.props.name}; }}

ReactDOM.render(, mountNode);46ComponentHello JaneHTML

ReactComponent PropsState47

React

48HTML

Component

StateStateComponentprivateJSX

ReactDOMPropsState49

React

50HTML

Component

StatePropsJSX

ReactjQuery51

React

52

HTML

HTML

jQuery

HTMLDOM

ReactReact53

ComponentReact54HTML

ReactJSX

ComponentPropsReact55HTML

ReactJSX

ComponentPropsReact56HTML

State

ReactJSX

ComponentPropsReact57HTML

State

ReactJSX

ComponentPropsReact58HTML

State

ReactJSX

ComponentPropsReact59HTML

State

React

JSXStatePropsHTMLDOMJSX

ComponentPropsReact60HTML

State

React

DOMReactVirtual DOMJSX

ReactComponent 61

React

62HTML

Component

ComponentComponentComponentComponentProps

React

63

ComponentComponentComponentComponentComponent

ComponentProps

React

64

ComponentComponentComponentComponentComponent

CallbackCallback

FLUX

65

FLUXFLUX66

FLUXHacker Way: Rethinking Web App Development at Facebook

https://www.youtube.com/watch?v=nYkdrAPrdcw67

FLUXMVC

MVCGUIMVC (Smalltalk MVC) 68

FLUXModelView

69

FLUX

70

ComponentComponentComponentComponentComponent

CallbackCallbackState

FLUXFLUX71

FLUXFLUX72

FLUX

73

FLUX

74ActionDispatcherStoreViewDispatcherStoreStoreActionStore

FLUX

75HTML

Component

StatePropsJSXReact

FLUX

76HTML

Component

StatePropsJSXStateComponent

FLUX

77HTML

Store

View(Container)

ComponentStatePropsJSXStoreView

FLUX

78HTML

DispatcherView(Container)

ComponentPropsJSXActionActionActionStore

Store

Store

State

FLUX79

FLUX

80HTML

DispatcherView(Container)

ComponentPropsJSXActionActionActionStore

Store

Store

State

FLUX

import HelloDispatcher from './HelloDispatcher';

const HelloActions = {

changeName(name) { HelloDispatcher.dispatch({ type: CHANGE_NAME, name, }); }

};

export default HelloActions;81HelloAction

Helloname

StoreActiontypename

FLUX

82HTML

DispatcherView(Container)

ComponentPropsJSXActionActionActionStore

Store

Store

State

FLUX

import {Dispatcher} from 'flux';

export default new Dispatcher();83HelloDispatcher

FluxDispatcher

FLUX

84HTML

DispatcherView(Container)

ComponentPropsJSXActionActionActionStore

Store

Store

State

FLUX

import {ReduceStore} from 'flux/utils';import HelloDispatcher from './HelloDispatcher';

class HelloStore extends ReduceStore {

getInitialState() { return 'Jane'; }

reduce(state, action) { switch (action.type) { case CHANGE_NAME': return action.name; default: return state; } }}

export default new HelloStore(HelloDispatcher);85HelloStore

Action

FLUX

86HTML

DispatcherView(Container)

ComponentPropsJSXActionActionActionStore

Store

Store

State

FLUX

import {Container} from 'flux/utils';import HelloStore from './HelloStore';import HelloComponent from './HelloComponent';

class HelloContainer extends Component { static getStores() { return [HelloStore]; } static calculateState(prevState) { return { name: HelloStore.getState(), }; } render() { return ; }}

const AppContainer = Container.create(HelloContainer);ReactDOM.render(, mountNode);

87HelloContainer

FLUX

88HTML

DispatcherView(Container)

ComponentPropsJSXActionActionActionStore

Store

Store

State

FLUX

import React from 'react';import HelloActions from ./HelloActions';

class HelloComponent extends React.Component {

handleChange(event) { HelloActions.changeName(event.target.value); };

render() { return ( Hello {this.props.name} ); }}

export default HelloComponent;89HelloComponent

Redux

90

ReduxReduxFLUXElmArchitecture91

Redux

http://elm-lang.org/(action, state) => state Elmupdaters Reduxreducers92

ReduxReduxFLUX93

ReduxRedux94

ReduxStoreStateReducer95

ReduxDispatcher96

Redux

97ActionReducerStateStateActionStore

Redux

98HTML

DispatcherView(Container)

ComponentPropsJSXActionActionActionStore

Store

Store

StateFLUX

Redux

99HTML

ReducerView(Container)

ComponentPropsJSXActionActionActionStateDispatcher

Store

Redux100ReducerView(Container)

ComponentPropsJSXActionActionActionStateStore

Redux

101View(Container)

ComponentPropsJSXActionActionActionStore

ReducerState

Redux102ProviderComponentPropsJSXActionActionActionContainerStore

ReducerState

Redux103ProviderComponentPropsJSXActionActionActionContainer

Store

ReducerState

ReduxFLUX104

ReduxReduxMiddleware105

Redux106ProviderComponentPropsJSXActionActionActionContainerStore

ReducerStateReduxMiddleware

Redux107ProviderActionActionActionContainer

Store

ReducerStateComponentPropsJSXMiddleware

ReduxMiddlewareAPI108

Redux109ProviderActionActionActionContainer

Store

ReducerStateComponentPropsJSXMiddlewareAPI

ReduxMiddlewareRedux Saga110

Redux Saga

111

Redux SagaAction112

Redux Saga113ProviderActionActionContainer

ReducerStateComponentPropsJSXSagaAPIAction

Redux SagaSagaSaga114

Redux Saga115ActionSagaSagaAPISagaDBSagaAPI2Fork: Call: ForkForkCall

Redux SagaAction116

Redux Saga117ReducerSagaActionSagaPutTakeActionPut

Redux Saga118

Redux Saga119

Redux Saga120

Redux Saga121

Redux Saga122

Redux Saga

123

https://medium.com/@marcelschulze/using-react-native-with-redux-and-redux-saga-a-new-proposal-ba71f151546f

Redux SagaActionSaga124

Redux SagaAction2

System&User ActionReducer Action125

Redux Saga126

Redux Saga127ProviderActionActionContainer

StateComponentPropsJSXSagaAPIActionReducer

Redux Saga128ProviderActionActionContainer

StateComponentPropsJSXSagaAPIAction

Reducer

ActionReducer

Redux Saga129ProviderActionContainer

StateComponentPropsJSXSagaAPIActionReducer

Redux Saga130ProviderActionContainer

StateComponentPropsJSXSagaAPIActionReducer

User Action

Reducer Action

Redux SagaSystem&User Action

or131

Redux SagaActiontype

e.g. USER_NEWS_ARTICLE_TOUCHEDe.g. SYSTEM_APP_LAUNCHED132

Redux SagaReducer Action

ReducerStateAction133

Redux SagaActionSaga

e.g. REDUCER_VIEW_NEWS_FETCH_DONE134

Redux Saga135

136

ReduxSagaAjaxModelUserActionUserInterfaceDataAccessDataIntegrationUserEventDataStoreStateMachineReducerWeb APIXML-RPCStatic JSO