# Redux攻略

驗證觀念

目前對redux的認識是因為flux 的模式會讓每次hot reload state都會被初始所以針對flux的模式把 管理state的store 抽離到外層

---

1. The Single Immutable State Tree
介紹 state 可以改變但是每次改變 都是透過 Immutable

---

2 Describing State Changes with Actions
介紹 state 與 action 的關係

---

3.Redux: Pure and Impure Functions
理解什麼事pure 跟 impure function 因為 Immutable 要用到的事 pure function

---

4.The Reducer Function
Reducer 主要是透過 pure function 去改變 state

---

5.Writing a Counter Reducer with Tests
實作 reducer 並用 expect 去驗證是否回傳state有符合預期
目前reducer 可以理解回傳改變後的state
return state+1 並沒有被污染但如果用state++就是impure function

---

6.Store Methods: getState(), dispatch(), and subscribe()

解釋了透過redux的createStore 和三者的關係
const store=createStore(reducer)
這邊是要管理所有的reducer的store集中管理方便放在之後的<provider store={store}><app></app></provider>標籤
<app></app> 進行hot reload時就不會動到外層的store

目前理解的是 click事件觸發了 store.dispatch 去呼叫 reducer 同時

store.subscribe(render) 因為reducer是純函數所以只要有變動就把store.getState()用render()資料畫出來
render()先跑一次render在畫面上先畫出 store.getState的數字

---

7.Implementing Store from Scratch

這個章節在講 createStore 在做什麼事
目前理解是 他會在裡面
回傳三個 const getState ,dispatch , subscribe

今天就是 listener就是外部 store.subscribe(render)
透過push註冊到 listeners裡面 ,然後在dispatch的時候再透過迴圈執行每一個 listener
如果要取消 listener 就在執行一次
但要先存值 const aaa= store.subscribe(render)
在執行aaa() 就可以把它給註銷

---

8.React Counter Example

這邊使用react 實作了+ -的 compent在使用 <Counter></Counter> 包起來還有下層 省略了 props用箭頭函數直接傳到 onClick 這邊就可以看出 react+redux 的配合原形

---

9.Avoiding Array Mutations with concat(), slice(), and ...spread

https://www.npmjs.com/package/deep-freeze/tutorial

這邊一開始檢查使用expect(addCounter(listBefore).toEqual(listAfter)
是會通過的 只要在addCounter回傳 list.push(0) 與他預期的是一致會通過

但是加上deepFreeze 後強制一定要是pure function就會報一個錯誤
type 是不能被擴展的

所以這邊之後的動作就是把reducer裡面的回傳都改成 pure function回傳 一開始使用es5demo後來改為 es6 ...spread 來說明
例如 0~10
index為3 就是取道第三筆
list.slice(0,index)
concat(list.slice(index+1)) 從第五筆開始取 這樣就在原物件裡避開第四筆 回傳的pure function

---

10.Avoiding Object Mutations with Object.assign() and ...spread

這邊透過了Object.assign({},todos,覆寫資料) 前面的{} 就是新增一筆同樣的就是新增一筆同樣的state但是參考不同所以就不會動到原來的state但回傳的時新的state 這邊也可以透過 ...spread es6更簡潔

---

11.Writing a Todo List Reducer (Adding a Todo)

主要差異是在[...xxx,值]是在pure function update push
那如果像第10章節{...xxx,值}則是pure function的 update

---

12.Writing a Todo List Reducer (Toggling a Todo)

上個章節11章是使用針對一個參數來...spread來用這個章節主要是講list的時候要配合map來過濾使用
state.map(todo=>{
if(todo.id!==action.id){ reture todo}
return {...todo,completed:!todo.completed}
})

---

13.Reducer Composition with Arrays
把todos 裡面的 todo抽離出來 抽離出來的 todo function 預設值記得回傳 state 這邊也要使用pure function

---

14.Reducer Composition with Objects
這個章節使用了todoApp 組合了兩個reducer 並解釋store管理了所有reducer傳回的state

---

15.Reducer Composition with combineReducers()
跟上節一樣todoApp結合了兩個 reducter,只是這個章節用redux內部提供的combineReducers去組合

---

16.Implementing combineReducers() from Scratch
這個章節在講combineReducers實作
有用到object.keys(reducers).reduce(nextState,key) 這邊應該是類似跑foreach迴圈去跑所以每個reducer都會跑到
這邊要參考 原生指令reduce
https://www.talkingcoder.com/article/6262994570308681728

利用 combineReducers 裡面的reduce 語法去產生每一個
重複的 state跟action

---

17.React Todo List Example
實戰example input 用rel的方式不懂 ,其他用react render實作
ref 是react中特有的標籤 可以用在任何的compent 使用時會有一個callback function
ref 來可以用來管理所以的input 用法如下 this.refs.input
---

18.React Todo List Example (Toggling a Todo)
主要用react實作redux 用map去畫出所有的todos資料當onclick 時候再去toggle true false render的時候 使用 textDecoation:todo.complated?'line-through':'none'
這邊不懂的事textDecoation是..reactjs的預設值嘛還是自定義的 還是css原生的因為原生的話好像要加text-decoation
style={{}} 第一個{}是進入js的環境用 ,第二個變數是 object

---

19.React Todo List Example (Filtering Todos)
增加下面那一排All 未完成 完成 的選項

增加一個 getVisibleTodos的物件 有兩個參數 todos,filter

三個狀態SHOW_ALL,SHOW_COMPLETED,SHOW_ACTIVE
把RecatDOM那邊的TodoApp 參數改成 ...store.getState()

https://facebook.github.io/react/docs/jsx-spread.html#spread-attributes

---

20.Extracting Presentational Components
這邊把程式碼用react方式抽離出來做成<TodoList>元件 裡面在包括todo子元件 再把一些方法跟參數抽離出來

---

21.Extracting Presentational Components (AddTodo, Footer, FilterLink)
使用react把AddoTo,Footer跟 Filterlink用 react compents包起來了跟上一章節差不多

---

22.Extracting Container Components (FilterLink)

這邊使用了
class FileterLink extends Compoent{
compentDidMount()=store.subscribe(()=>
this.forceUpdate();
);
}
compentwillunmount(){
this.unsubscribe();
}

}
利用生命週期強迫取消了訂閱 應該是用不到render

---

23.Extracting Container Components (VisibleTodoList, AddTodo)

多用了一個container包起來 都用clsss xx extends compoent裡面可以有react的生命週期 把所有的東西都元件話

---

24.Passing the Store Down Explicitly via Props
把store 宣告在每個物件的上層透過props讓下層去取用 (flux用法)

---
25.Passing the Store Down Implicitly via Context

<prodive store={store}>
<app ></app>
<prodiver>

裡面有提到元件部分
child.contexttypes={
store:React.propTypes.object
}
要用不然store 就會吃不到
加完上面的就可以用const {store} = this.content 吃到

---

26. Passing the Store Down with <Provider> from React Redux

說明 直接使用就可以拉 const {Provider} from redux

---

27.Generating Containers with connect() from React Redux (VisibleTodoList)
使用connect HOC high order Component
透過 decoration 語句
connect(stateprops,dispatchprops)(compnentName)
compnentName 吃到 stateprops,dispatchprops 的資料
https://leozdgao.me/chushi-hoc/

---

28.Generating Containers with connect() from React Redux (AddTodo)

感覺是先把 addtodo變成一個變數 let xxx={}
然後透過 xxx=connect(null,null)(xxx) 然後null可以去掉簡寫後讓 xxx具備有store的功能 ? 不太懂

---
.

29.Generating Containers with connect() from React Redux (FooterLink)
同上再把 footter link也在用connect的方式在 hoc一次

30.Extracting Action Creators

把dispatch相同的拉出來重構

http://cn.redux.js.org/docs/basics/UsageWithReact.html

https://chentsulin.github.io/redux/docs/basics/UsageWithReact.html

母container ->componets
connect + redux Container Components
container 就是會有connect物件去讓 本物件加上例如全域的store跟dispatch 增加功能使用

子
Presentational Components 就變成是一個接收參數的元件

待續...