ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo
React ?????? ????
??? ???? ??? ?? ????
??? ( miconblog@gmail.com )
? React ????
? React ????
?? ?? ??? ??? ? ?????.
? React ????
???? ???? ????? ??????? ?????.
1??? ??? ?????.
???
??? ?? ?????.
??? ???? ???? ?????.
http://rlibro.com
? ??? 2015? 12? 31?!
?? ??? ? ??? ??? ? ????.
??? ? ?? ????
??? ??? ??? ? ??? ????.
?? ???? ????
??? ??? ?? ???? ???? ???? ??,¡­
??? ?? ???¡­ OTL
??? ??? ??.
??? ?? ?? ? ??.
???,.. ??? ? ?? ?? -_-;
?? ????? ?
??? ????
?? ???? ??.
?? ???? ?? ???? ??
1? 6???? ????? ??? ??¡­
React? ??? ??1
React? ??? ??2
???, ???? ?? ??
?? ???????
Lv1. ??
??? ????? ??????.
?? HTML ??? ?? ? ???.
???? ???
??? ??? ??? ???
???? ?? ???
??? ????? ??? props ?? ???? ???? ???? ????.
<Button	icon=¡®power¡¯	style={¡­}>Click	me!</Button>
Lv2. ???
??? ??????.
???? props? ?? ??? ??
???
<SerachBar	onSearch={	keyword	=>	{	console.log(keyword)	}	}	/>	
?? ??? ?? ???? ?? ??? ???
? ???.
???? ???? ?????
				<SerachBar		
			initialValue={¡®?????¡¯}	
							onSearch={	keyword	=>	{	console.log(keyword)	}	}		
				/>	
???? ??? ??? ??? ?????? ????!
Lv3. ????
?? ?? ???.
<SerachBar		
			initialValue={¡®?????¡¯}	
			dataSource={[..]}	
							onSearch={	keyword	=>	{	console.log(keyword)	}	}		
				/>	
props ? ??? ?????
??? ???? ??? ??? ??? ?????
SearchBar? ??? ?? ??? ???? ?????
???? ??? ??? ?????.
Lv4. ???? ????
??? ????, ????? ???? ???
<SerachBarContainer>	
			<SerachBar		
						initialValue={'??'}	
						dataSource={[]}	
						onSearch={	keyword	=>	{	console.log(keyword)	}	}		
			/>	
</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 ??? ??? ??? ??!
?! -__-;;;; ??? ?? ??? ??? ???
?? ??? ?? ????¡­
????(???) ??
?????? ??
??? ??
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
Redux ????? ??, Reducer ??!
Lv2. ?? ???
?? ???? ?? ??? ??? ??????.
redux-thunk ? ???? ??
thunk ??? ?? ????? ??? ???!
?? ???? ?? plain object ? ???? ????.
'
: 1
: ) ( ( : 1
function	createThunkMiddleware(extraArgument)	{	
		return	({	dispatch,	getState	})	=>	next	=>	action	=>	{	
				if	(typeof	action	===	'function')	{	
						return	action(dispatch,	getState,	extraArgument);	
				}	
				return	next(action);	
		};	
}	
const	thunk	=	createThunkMiddleware();	
thunk.withExtraArgument	=	createThunkMiddleware;	
export	default	thunk;	
thunk ????? ?? ??¡­?
?? ????.
??? thunk ?? ???? ??? ??????.
?, ??? ?? ?? ?? ????? ??? ????.
'
: 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,	
				},	
		};	
}	
?!
???
????? ??.
????.
????(???) ??
?????? ??
??? ??
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
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
????(???) ??
?????? ??
??? ??
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
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 ???? ?? ??? ??? ??.
???? ???? Task? ???.
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

More Related Content

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