�ݺ�ߣ

React ?????? ????
??? ???? ??? ?? ????
??? ( miconblog@gmail.com )

? React ????
?? ?? ??? ??? ? ?????.

? React ????
???? ???? ????? ??????? ?????.

??? ???? ???? ?????.
http://rlibro.com

??? ? ?? ????
??? ??? ??? ? ??? ????.

?? ???? ????
??? ??? ?? ???? ???? ???? ??,��
??? ?? ???�� OTL

??? ??? ??.
??? ?? ?? ? ??.
???,.. ??? ? ?? ?? -_-;

?? ????? ?
??? ????
?? ???? ??.

?? ???? ?? ???? ??
1? 6???? ????? ??? ??��

?? HTML ??? ?? ? ???.
???? ???
??? ??? ??? ???
???? ?? ???
??? ????? ??? props ?? ???? ???? ???? ????.
<Button icon=��power�� style={��}>Click me!</Button>

???? props? ?? ??? ??
???
<SerachBar onSearch={ keyword => { console.log(keyword) } } />
?? ??? ?? ???? ?? ??? ???
? ???.

???? ???? ?????
<SerachBar
initialValue={��?????��}
onSearch={ keyword => { console.log(keyword) } }
/>
???? ??? ??? ??? ?????? ????!

<SerachBar
initialValue={��?????��}
dataSource={[..]}
/>
props ? ??? ?????

??? ???? ??? ??? ??? ?????
SearchBar? ??? ?? ??? ???? ?????
???? ??? ??? ?????.

Lv4. ???? ????
??? ????, ????? ???? ???

<SerachBarContainer>
<SerachBar
initialValue={'??'}
dataSource={[]}
/>
</SerachBarContainer>
???? ???? ?? ?? ?????.

import SerachBar from './SerachBar';
class SerachBarContainer extends React.PureComponent {
state = {
loading: false,
results: []
}

render () {
return (
<SerachBar dataSource={this.state.results} onSearch={this.handleSearch}/>
);
}

handleSearch = (query) => {

this.setState({loading:true})
fetch('/search')
.then((??)=>{
this.setState({results:??, loading:false})
})

}
}
??? ??? ?? ?? ??????

???? ???? ?? ?????.
???? ???? ??? ???? ????? ?
??? ?? ??? ??? ??(??) ????

???, ???? ????
??? ?? ???? ??? ??? ????

??? ??? ??? ?? ???
??? ???? ????? ??? ???? ??
click!
????? ???? ????? ?? ?????? ?
???? ???????. �� ???!
) (
) (
.(.
.(.
. .(
.(.

??? ????? ??? ??!
) (
) (
.(.
.(.
. .(
.(.
) (
.(.
.(.
) (

???? ??? ???? ??
?? ???? ???
??? ???? ??? ????.
:
( )(
./ ( )(
./
(/
( )(
./ ( )(
( )(
./ ( )(
/
/ (

???? ??? ???? ??
???? ??? ???? ???? ??
? ?? ???? ??? ?? ????.
C
( )(
./ ( )(
./
(/
( )(
./ ( )(
( )(
./ ( )(
:
/ (
??? ??? ??? ??
?? ??? ?? ???? ?? ???.
?, ????? Props? ??????.

???? ??? ???? ??
1. ??? ?? ????? ??? ?? ??? ????.
2. ?? ?????
??? ?? ????
?? ???? ???? ?????.
3. ??? ?? ?? ???? ??? ?? ??
?? ?? ??? ???? ??? ??? ??
? ????.
C
( )(
./ ( )(
./
(/
( )(
./ ( )(
( )(
./ ( )(
:
/ (

??? ??? ??? ?? ???
Redux? ??? ???? ??
click! ?????? ???? ?????!
???? ??? ????? ???? ???.
??? ??? ??? ??? ??!
) ( ).
) ( ).
) ( ).
) ( ).
) ( ).
) ( ).

??? ?? ???
Redux? ??? ???? ??
click!
??? ??? ?? dispatch ??!!
. .
. .
. .
. .
. .
. .
)
. (
???? ???? ??? ????
??? ???��

Redux? ??? ???? ??
??? ???? dispatch? ????.
. .
. .
.
.
)
. (

Redux? ??? ???? ??
?? ?? dispatch? ???? ????
context ??? ????.
export default class BookNoteList extends React.PureComponent {
static contextTypes = {
store: React.PropTypes.object
};

render() {
return(
<div>
<Button
onClick={
()=> this.context.store.dispatch(??)
}
> ???? ????? ? ???! </Button>
</div>
)
}
}
Provider? ??? ??? store ????? ??????.
. .
. .
)
. (

Redux? ????? ???? ??
connect(mapStateToProps, mapDispatchToProps)(ContainerComponent)
connect(mapStateToProps)(ContainerComponent)
dispatch ??? ??? ?????.
??, redux? ???? ???.
??? ????? ???? GoGo!
(
(
)
)

dispatch? callback? ???? ??
Redux ???? ??? Ajax ??? ???? ?? ??
????? ??? SDK? ??? ????.
A
A
)(

React? ??? ?? ????
????(???) ??
?????? ??
??? ??
Middleware Control Flow
. E A A E A I - E /
l pSh
/
E E
EC
. )/ )/
pSh MS
( A A
( C A
EC AA
E
E E
/) .
iMS
E
sRf T rk
Pao f
E
Lj
. E A
( A A
C CE
gc
E C CE
/
e
???
A
(
Pao
/
e / OP V
EC A
A A
,
Lj
pSh
E EE A
mn
d
bU
A
Lj
EC A
?? ?? ?? ??!

??? ??? ??????
2. ???? ??? ????? ????? ???.
1. ???? ??? ?? ????? ???
3. ?? ??????? ???? ???.
?????? ??? ??? ?? ??? ????!
??? ????? ??, ????? ??? ????!
??? ?? ? ????? ?? ???? ???
????? props? ?? ???

???, Redux ????
????? ???? ??? ????.

Lv1. ???
??? ?? ??? ???? ?? ?? ??? ?? ?? ??.

?????? (Pure Function)
??? ??? ?? ?? ?? ????.
???? ??? ??? ??? ??!
???? ?? ???!
??? ???? ??? ?? ????
,
O NT
R : !
I A C

????? ??? ??? ??????!
???? ?? ?? ???
??? ????? ????.
?, ?? ???
?? ??? ?? ????? ??????.
?? ??? ?? ???? ???
??? ??? ????? ???
const initialState = { x:1, y: 2 };
function reducer(state=initialState, action) {
state.x = 3;
state.y = action.payload;
return state;
}
:& A
3 : : &
,

???? ??? ???? ??? ????.
??? ??? ??? ?? ?? ?? ???
???? ?? ??? ??? ?? ?? ?
?? ????? ????.
Note that selectorFactory is responsible for all caching/memoization of
inbound and outbound props. Do not use connectAdvanced directly
without memoizing results between calls to your selector, otherwise the
Connect component will re-render on every state or props change.
function mapStateToProps( state: Object ) {
// ???? ??/??????? ???? ?????.
const testState = state.get(��test');
const testValue = reselectValue(testState);
// ?? ???? ???? ??? React? shouldComponentUpdate ???? ?? ??.
return {
test: testValue,
};
}
export default connect(mapStateToProps)(ReactComponent);
&
Redux ??? ??? ??? ??!
?! -__-;;;; ??? ?? ??? ??? ???
?? ??? ?? ????��

????(???) ??
?????? ??
??? ??
. E A A E A I - E /
l pSh
/
E E
EC
. )/ )/
pSh MS
( A A
( C A
EC AA
E
E E
/) .
iMS
E
sRf T rk
Pao f
E
Lj
. E A
( A A
C CE
gc
E C CE
/
e
???
A
(
Pao
/
e / OP V
EC A
A A
,
Lj
pSh
E EE A
mn
d
bU
A
Lj
EC A
Redux ????? ??, Reducer ??!

Lv2. ?? ???
?? ???? ?? ??? ??? ??????.

redux-thunk ? ???? ??
thunk ??? ?? ????? ??? ???!

?? ???? ?? plain object ? ???? ????.
'
: 1
: ) ( ( : 1

?? ???? ???? ??? ??
export function requestUserLocation(){
return (dispatch, getState) => {
return dispatch({
type: 'USER_LOCATION_REQUEST'
});
}
}
redux-thunk ? ??? ??? ????? ?? ???? ??.
????? ???.
dispatch? ?? ????? ?? ??? ???? ??.
??? ?? dispatch? ??? ???? ????.
?!
????

?? ???? ?? ? ??
export function addComment (noteId, noteAuthorId, content) {
const currentUser = Parse.User.current();
return (dispatch, getState) => {
dispatch({ type: types.ADD_COMMENT_REQUEST });
Parse.Cloud
.run('addComment', {
noteId: noteId,
fromUserId: currentUser.id,
toUserId: noteAuthorId,
content: content
})
.then( note => {
dispatch({
type: types.ADD_COMMENT_SUCCESS,
response: Object.assign({}, normalize(note.toJSON(), noteSchema) ),
meta: {
request: {
objectName:'DiaryNote'
}
}
})
});
}
}
dispatch ????.
??? ??? ?? ??.
??? ????? ???
?!
????

?? ???? ???? ??? ?!
export function addComment( noteId, values ) {
if( !values ) { return { type: types.NO_VALUE } }
values.author = Parse.User.current();
values.referrerId = noteId;
return {
type : types.PARSE_SERVER,
payload: {
objectName: 'Comment',
method : 'POST',
params : values,
},
meta : {
prefix: 'COMMENT_ADD',
noteId,
schema: Schemas.COMMENT,
},
};
}
?!
???
????? ??.
????.

????(???) ??
?????? ??
??? ??
. E A A E A I - E /
l pSh
/
E E
EC
. )/ )/
pSh MS
( A A
( C A
EC AA
E
E E
/) .
iMS
E
sRf T rk
Pao f
E
Lj
. E A
( A A
C CE
gc
E C CE
/
e
???
A
(
Pao
/
e / OP V
EC A
A A
,
Lj
pSh
E EE A
mn
d
bU
A
Lj
EC A
Redux ????? ??, ?? ???
??!

Lv3. Redux ????
Redux ?????? ???? ????? ????.

????? ????? ??? ??? ??? ??? ??? ????? ???? ???? ??.
compose(
//applyMiddleware(require('redux-immutable-state-invariant')()),
applyMiddleware(thunk, parse),
applyMiddleware(sagaMiddleware),
//applyMiddleware(createLogger()),
applyMiddleware(redirectMiddleware),
window.devToolsExtension ? window.devToolsExtension() : f => f,
),
??? ??? ??? ????.
Middleware
A / ) / / / / (A
/
/ /
/
(/ A ) /
????
Thunk
????
Saga
????
Logger
????
Custom..

??? ???? ?? ????? ??.
??? ??? ????? ??.
????? ??? ??? ???
?? ??? ?? ???? ??.
?? ????? ??? ???? ????.
??? ??? ???? ??.
???? ??? ???? ??? ???
import { browserHistory } from 'react-router';
export default store => next => action => {
if ( action.redirect ) {
setTimeout(() => {
browserHistory.replace(action.redirect.pathname);
}, 0);
}
next(action);
}
action.redirect ?? ??? ?
URL? ???? ??? ????
????
Thunk
????
Saga
????
Custom) . ) .
. ) (

???? ??? ???? ???? ???
N P I
.
????
Thunk
????
Saga
????
Custom. .
. (
)
A ) R
P I
.
A P I R a R
P RS
RTOC

????(???) ??
?????? ??
??? ??
. E A A E A I - E /
l pSh
/
E E
EC
. )/ )/
pSh MS
( A A
( C A
EC AA
E
E E
/) .
iMS
E
sRf T rk
Pao f
E
Lj
. E A
( A A
C CE
gc
E C CE
/
e
???
A
(
Pao
/
e / OP V
EC A
A A
,
Lj
pSh
E EE A
mn
d
bU
A
Lj
EC A
Redux ????? ??, ????
?~??!

???, ??? ??
???? ???? ?? ????? ????.

redux-saga ? ????!
saga? ??? ??? ????.
??? ??? ?????? ???? ??? ??? ???? ??????.

?? ??? ???? ?????.
N P I
.
????
Thunk
????
Saga
????
Custom. .
. (
)
A ) R
P I
.
A P I R a R
P RS
RTOC

Saga? ??? ???? ??? ??? ?? ???.
N P I
.
Saga
Task
Saga
Task
Saga
Task. .
. (
)
A ) R
P I
.
A P I R a R
P RS
RTOC

Saga ???? ??? ?? ??? ??????.
?, ? ?? ??? Generator ???? ?? ??? ??? ??.

import { put, call, select, take, fork } from 'redux-saga/effects';
import * as types from ��../actionType/redBookType';
... ?? ...
function* postRedBook( uname, cityName, countryName, coverImage, geoPoint, authorId ) {}
function* createRedBookTask() {
while ( true ) {
const action = yield take(types.CREATE_REDBOOK);
const { uname, cityName, countryName, coverImage, geoPoint, authorId } = action.payload;
const response = yield postRedBook(uname, cityName, countryName, coverImage, geoPoint, authorId);
if ( response.success ) {
yield put({ type: types.CREATE_REDBOOK_SUCCESS, payload: { uname, book: response.success } });
yield put({ type: types.CLOSE_BOOK });
yield put({ type: 'SYS_CREATE_DIARYNOTE_BY_REDBOOK', payload: { book: response.success, authorId } });
}
}
}
export default function*() {
return [
yield fork(loadRedBooksTask),
... ?? ...
yield fork(createRedBookTask),
];
}
??? ?????.

??? ???.
Redux? Router ?? ??
??? ????? ?? ? ?? ?? ???? ???? ??.

?? ??? ???? ?? ???? ???? ??.
/guide/Flores,Guatemala/notes/create/guide/Flores,Guatemala

???? ??? ???? ??? ? ??.
render() {
.. ?? ?? ..
return (
<div>
.. ?? ?? ..
<Button onClick={this.handleSubmit}>??</Button>
</div>
)
}
handleSubmit = ( ) => {
this.setState( {loading: true} );
savePost( this.state.content, {
success: () => {
browserHistory.goBack();
},
error: () => {
this.setState( { loading: false } );
}
});
}
??? ??? ??????? ??? ??? ?????? ???.

??? ??????? ??? ????.
render() {
.. ???? ?? ??? ?? ..
}
handleSubmit = ( ) => {
const { content } = this.state;
this.props.dispatch( { type: ��SAVE_NOTE�� , payload: { content } } );
}
?? ????? URL? ??? ????
(
)

????? ?? ?? 4??
1. ???? ???? ??? ???.
- SAVE_NOTE_SUCCESS ??? ??? ???? ??? ??? ??? ??? ???? ????
- ??? ???? ?? ??? ?? ??? ? ????��
2. ??? ???? ?? ???? ????? ??? ?
??? redirect payload? ??? URL? ????.
- ??? ????? ?? ???? ?????? ? ??..
3. ?? ??? ??? ??? ????? ??? ??? ????.
- Saga ?? ? ??? ?? ?? ?????
- ?????? ???? ?????? ??? ??? ?? ??? ?? ??? ?? ??? ????.
4. 2?? 3?? ??? ??.
- ?? ?? ??? ?? ?? ??? ???? ????.
- { type: ��SAVE_NOTE��, payload: { content }, redirect: { pathname: ��/guide�� } }

???, ????? ??? ?? ??
?? ??
?? ???? ( webpack, react-router v3 to v4 )
?? ??? ??
immutablejs ??
Flow type checker / typescript ??
ServerSide Rendering
???? API / GraphQL ??
Rx / MobiX ? ??? ??? ???? ????? ??

?? ?!
??? ???�� ???? ???��
???? ????�� ????? ?????��
miconblog@gmail.com
facebook.com/wearemooving
rlibro.com

�ݺ�ߣ

React ?????? ???? - ??? ???? ??? ??? ????.

More Related Content

React ?????? ???? - ??? ???? ??? ??? ????.