React&redux

Blank 2015-05-06
View ControllerModel
Ideas of Flux & ElmFacebook & Instagram

ES6 & ES7 magic
Maintain a consistent code style
Manage form Unit tests
https://github.com/erikras/react-redux-universal-hot-example
Redux DevTools Development
React Redux Ofﬁcial Binging

REACT
Virtual DOM
Data Flow
JSX
Component
APP
Virtual
DOM
DOM
Virtual
DOM
Next
State
View State
Table Row
Cell Cell Cell Cell

JSX (1/3)
• JSX (Almost like HTML)
• JS createElement (“TagName”, “Attribute”, “Child”)
• React Factories (Common HTML tag)
(Javascript XML)
JavaScrip
Factory
Need
Compile

JSX (2/3)
• Native HTML tag (Lower-case first letter)
• JSX DOM (Upper-case first letter)
• Reserved words (class => className, for => htmlFor, …)
• JavaScript expression & Comment
a - z first
A - Z first
Comment{Expression}

JSX (3/3)
• … (Spread attributes ES6) & Overwrite with order
• JSX Differences
• style accepts JavaScript object (camelCased properties)
• onChange event behaves as you would expect it to
• Form More here
style onChange Form
React? Redux?

VIRTUAL DOM
http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
Hight
Performance

DATA FLOW
Initial data
User input
Network data
New data
ComponentSet State
Set Props
ComponentSet State
Set Props
Component Set State
Event
Callback
ComponentSet State
Set Props
Set
Again
One Way
Data Binging

Component
COMPONENT (1/2)
• props (Component property)
• External data from parent
• this.props read-only
• state (State machine)
• Internal data in component
• this.state to read
• this.setState() to update
State render
Change
JSX Component
props
immutable
mutable
Easy to
Unit Test

COMPONENT (2/2)
https://kunigami.wordpress.com/2015/04/28/react-js-introduction/
Life
Cycle

REDUX
Action Reducer Store View
Provider Connect
Action Dispatcher Store View
FLUX (OFFICIAL)

ACTIONS
• type action type
• payload action data
• Pure function
Pure function Impure function
Always same output
with same input
May different output
with same input
Never side-effects May side-effects
Never alter state May alter state global
Action
JavaScript
Object
Call Rest
Api
Periodic
Update

REDUCERS
• (oldState, action) => newState (When state tree update)
• object spread (Ensure new object)
Reducer
New
State
Action
Pure function, too
reduce into
current state

STORE
• Maintain state tree
• getState() to get state
• dispatch() to sent action & alter state
• subscribe() to get callback function & listening to state update
Reducer
Action
Store
dispatch()
createStore()

DATA FLOW
Call store.dispatch(action)
Action trigger root reducer
• reducer(state, action)
• return new state
Store save return state tree
• Call all store.subscribe(listener)
• get new state store.getState()
Action
Reducer
Store
App call
root reducer
root reducer
new state
subscribe() dispatch()
getState()

REACT-REDUX (1/2)
• <Provider> (Store container)
• Call by component child
Store
Component
Provider

REACT-REDUX (2/2)
• connect([mapStateToProps], [mapDispatchProps], null, null)
• [mapStateToProps(state, [ownProps]): stateProps]
• [mapDispatchProps(dispatch, [ownProps]): dispatchProps]
State
Dispatch
Connect
Provider

SESSION CONTROL
Client-side Server-side
Basic Auth
Token Cookie Session
OAuth 2.0
Digest Auth

REFERENCE
• http://www.slideshare.net/wani420/react-js-51328819
• http://www.slideshare.net/wookieb/reactjs-46622996
• http://www.slideshare.net/AndrewHull/react-js-and-why-its-awesome
• http://www.slideshare.net/AllThingsOpen/an-introduction-to-reactjs
• https://hulufei.gitbooks.io/react-tutorial/content/usage-with-react.html
• http://facebook.github.io/react
• http://www.slideshare.net/JonasOhlsson/using-redux
• https://github.com/reactjs/redux/issues/291
• http://stackoverflow.com/questions/20963273/spa-best-practices-for-authentication-
and-session-management
• http://jaysoo.ca/2016/01/03/managing-processes-in-redux-using-sagas/

React&redux

More Related Content

What's hot (20)

Similar to React&redux (20)

Recently uploaded (20)

React&redux