# 0329 Share React SideProject
###### tags: `React`

1. HackMD 範本
https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-use-template-tw

2. firebase 部屬有使用上限
https://firebase.google.com/docs/firestore/quotas?hl=zh-cn

3. ract-router-dom 版本新的 沒有Switch

4. appjs route 放在後面帶變數

5. Hooks
createContext, useContext, useReducer,useState,useHistory,useEffect
UsestateValue
https://medium.com/%E6%89%8B%E5%AF%AB%E7%AD%86%E8%A8%98/react-hooks-usestate-vs-usereducer-b14966ad37dd

useState vs useReducer
去研究一下

useEffect , 後面的[term] 會變成無窮迴圈

6. Redux
dispatch

## -單向資料流
redux的架構中資料都遵循相同的生命週期模式。
欲更新資料必須從發送action開始
- Action
用來傳遞資料給store，也是store唯一的資料來源
改變資料的唯一方法，dispatch一個action
- Reducer
收到action後，唯一可以用來指定state更新
reducer愈單純愈好
- Store
類似於一個存在前端的小型資料庫
如何獲取store中的資料：getState()
如何更新store中的資料：dispatch(aciton)
store只有一個、reducer有很多個

useReducer影片
https://www.youtube.com/watch?v=kK_Wqx3RnHk

useEffect解説
https://ithelp.ithome.com.tw/articles/10223344
https://www.youtube.com/watch?v=0ZJgIjIuY7U

useParams解説
https://v5.reactrouter.com/web/api/Hooks/useparams

7. ...state

... in javascript
https://codeburst.io/what-are-three-dots-in-javascript-6f09476b03e1

Copying an array

----------------------------------------
next.js
REARCR -> Link (React Touter)

1. logcalstorhe set item
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

2. 同異部

useState -> setInput hook

3. router.query 宣告的 const 名稱必須跟名字一樣