點點筆記

51

1. 挑戰一：ajax request
   in redux, we need to centralize(使集中於中央) all of our logic into reducers and actions and our react component are only resposible for showing data,
2. 挑戰二：line chart  -->use third party
3. 挑戰三：deal with a redux application where state changes significantly over time.

52

1. 先處理search bar ，第一個問題：search bar 是component 還是 container
   解析：１．search bar needs to have the ability to modify the state of our application by dispatching actions and to call an action creator
   解析： 2．normal component just show some content on the screen.
2. chart component ---> reusable components that we can use even across projects.
3. container 起手樣板

53--search bar 

1. form element
2. create a controlled component we need to set our state whenever the input is changed.
3. input 的 value 來至於 this.state.term
4. all Dom event handler like onChange, onClick, onHover or onScrol, they all come along with this event object 

   onInputChange(event){
   
   }

   

54.

1. form elememt : 底下的 input 或是 button, is focused the browser automatically thinks that you're trying to submit the contents of this form.
2. 點下submit，就會 make a POST request to the server.
3. 當有需要設計 user 去 input 文字時，建議可以考慮 form 標簽，可以減少許多設定，但要preventDefault 

56. API ajax

1. middleware is our functions that take an action and depending on the actions type and actions payload or any other number of factors(因素；要素), middleware can choose to let the action pass through.(通過) It can  manipulate(操作) the action, 或禁止，before they reach any reducer, middleware as gatekeepers(看門人)
2. someone  is going to call an action creator which is going to try to toss(拋，扔，投) an action over to the reducedr.
3. 在reducer前有一個看門人叫middleware
4. middleware is allow us to do some really interesting thing by kind of intercepting(攔截；截住) these actions
5. middleware can modify actions
6. we can have 100 different middleware if you want. they all just function where action pass through them before hitting the reducer
7. redux promise

57. ajax.require

1. axios : is a library that is solely made for making Ajax request from the browser, works almost identically(相同) to Jquery
2. payload is an optional optional property that goes along with actions that can contain(裝載) some additional data 

58. the goal here is to call the action creator whenever the user submit the form

1. search bar 被submit的時候，進行 fetch data
2. 使用 connect method 讓 search bar container 和 redux 連結
3. 

59. redux promise

1. reducer is just function
2. the first argument is always our state for this particular piece of state that user is responsible
3. second argument us always our action
4. 
5. 確認：reducers資料夾裡的index.js 是不是有import 你定義的reducer進來
6. 步驟確認：
   1. 使用者submit的form
   2. call the action creator (fetch_wearher) (axios request) (axios return promise to request)(return promise as the payload)
7. reducer裏面的action裏面的payloard顯示是一個object而不是一個promise是因為，action creactor裡是使用 redux promise, 而redux promise是一個middleware, middleware 有能力去stop或manipulate(操作) action，before action進入任何的reducer，mibbleware(守門人)看到了這個action，如果這個payload 是一個promise，redux promise stop the action--->當redux promise發現payload是一個promise時，他就會出現this is my thing, my job, this is what i do, redux promise stop the action entired. redux promise unwraps(解開) the promise. ----> 當 redux promise 得到promise的resolved data. ---> here is a request from the server, redux promise 處理完了data 然後送給 reducer
8. middleware ----> interstitial(空隙的) handling of actions 
9. 當sever的request 拿到data，redux promise發現是一個promise，就會stop的action until the promise is resolved and then，然後開始處理這個promise，然後把產出的data給reducer
10. 

60.在 reducer 處理 payloard 得到的資料 data structure

1. reducer 裡使用 switch action type 去選擇要對哪些 action 做反應
2. never ever call    this.state.XXXX = xxxxxx;  不能這樣寫，必須用 setState ， 不要直接去操作 state，可以產生一個新的 state去做動作
3. 在 reducer 裡 不要直接 mutate the state, we return a completely new instance of state

61. render 天氣圖

1. 需要有路徑去得到 redux state -----> container 
2. 新的container如何得到 redux 的 data

   import {connect} from 'react-redux';

   function mapStateToProps(state){
       return { weather : state.weather };
   }
   
   // connect:  our container with the function mapStateToProps
   export default connect(mapStateToProps)(WeatherList);

   // 使用data
   { this.props.weather }

   

64. 使用第三方library，把得到的資料處理出來

1.  要帶入什麼資料給第３方套件？

65. 可重複使用的component，拉出去定義component

1. 因為sparkline會有３組重複的code，所以拉出去寫一個component
2. 那這個component 是 container嗎？不必要，因為他的父層是container 而他可以從他的父層拿到資料，所以這裡他只需要是component
3. 那這個component 是 class based component 還是 functional component -----> in this case,  就是 some props 進來然後 render，所以 functional component
4. functional component boilerplate

66. 父層的資料，帶入子層：字串

1. 帶字串===> units = "K"   ---> { props.units }
2. _.map( ) 裏面夾 map (  ) 
3. 

67. Google Map in the house

1. need to be touching redux?? No. -----> component
2. 不需state, 只需要 pass some props from the parent component
3. ref (ref system)---> reference --->direct reference to an html element  that has been rendered to the page
4. 
5. 

68. 引入 GoogleMap

1. componentDidMount, gets called automatically after this component has been rendered to the screen.
2. 從父層帶 data 進入 GoogleMap

3.  const { lon , lat } = cityData.city.coord;
   
   // find the coord object，兩行的 const 變一行

   

69. 總結

1. const a action type
2. middleware : redux promise
3. never to modify your state directlt   ---> 錯誤 sate.tomorrowWeather = weather
4. chart 單獨拉出去一個component，讓component是可以reuse的