From 75c9290154e3b7fb13d51db940e288a96dba44b8 Mon Sep 17 00:00:00 2001
From: Rukeith <fenglan.crazydance@gmail.com>
Date: Fri, 31 Mar 2017 22:24:44 +0800
Subject: [PATCH] Update TodoHeader.js

---
 .../src/components/TodoHeader/TodoHeader.js   | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/Ch07/react-redux-example/src/components/TodoHeader/TodoHeader.js b/Ch07/react-redux-example/src/components/TodoHeader/TodoHeader.js
index 3321244..183d4e7 100644
--- a/Ch07/react-redux-example/src/components/TodoHeader/TodoHeader.js
+++ b/Ch07/react-redux-example/src/components/TodoHeader/TodoHeader.js
@@ -1,6 +1,36 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { connect } from 'react-redux';
 
+// 將欲使用的 actions 引入
+import {
+  changeText,
+  createTodo,
+} from '../../actions';
+
+const mapStateToProps = (state) => ({
+	// 從 store 取得 todo state
+	todo: state.getIn(['todo', 'todo'])
+});
+
+const mapDispatchToProps = (dispatch) => ({
+	// 當使用者在 input 輸入資料值即會觸發這個函數，發出 changeText action 並附上使用者輸入內容 event.target.value
+	onChangeText: (event) => (
+	  dispatch(changeText({ text: event.target.value }))
+	),
+	// 當使用者按下送出時，發出 createTodo action 並清空 input
+	onCreateTodo: () => {
+	  dispatch(createTodo());
+	  dispatch(changeText({ text: '' }));
+	}
+});
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps,
+)(TodoHeader);
+
+// 開始建設 Component 並使用 connect 進來的 props 並綁定事件（onChange、onClick）。注意我們的 state 因為是使用 `ImmutableJS` 所以要用 `get()` 取值
 const TodoHeader = ({
   onChangeText,
   onCreateTodo,
@@ -13,4 +43,4 @@ const TodoHeader = ({
   </div>
 );
 
-export default TodoHeader;
\ No newline at end of file
+export default TodoHeader;