Update TodoHeader.js

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;
+export default TodoHeader;