學習react-redux官方例子todos的幾點記錄

1. container和component不是包含和被包含的關係。

光看字面意思，甚至是多數狀況下的用法，會讓人產生誤解。但官方的例子，彷佛是故意的，多數是container包含component，但有一個反例：component下的Footer包含Container下的FilterLink.

這應該是編例子的做者故意爲之，是要告訴你們：

containers和components不是包含和被包含的關係。他們最大的區別在於，container接受state，而後根據咱們本身的需求邏輯，分發(dispatch)相應的action。而components，只負責對不一樣的state下的屬性進行渲染。

 

2. 數據流向（store，action，reducer，container，components）

官方例子todos實在是很抽象，看了好久才明白數據的流向。

用戶操做界面，觸發對應的事件（onclick之類的），而後containers（action的分發都寫在container）便會通過咱們的判斷邏輯，分發對應的action。

此時，store便會開始工做，執行action對應的reducer。reducer返回更新後的狀態。

而後呢？而後就ok了，components自會變成你想要的效果。

還記得這段代碼嗎？

<Provider store={store}>

這段代碼會監聽store，當store調用reducer返回新狀態後，就會從新渲染收到影響的組件components。

3. 在store中，state是如何被分類存取？

不一樣的component都有各自的state，原生react都是經過組件對象保存，經過這樣的方式存取

this.setState({prop1:"..."})
let prop1 = this.state.prop1

但改用react-redux後，container的state都是這麼來的

const mapStateToProps = (state) => ({
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
})

很長一段時間想不通這個state是怎麼來的，後來才相同，store會自動調用這個方法傳入state。

還有個初學者迷惑的地方。與非redux的寫法不一樣，每一個對象有各自的state。在redux中，不一樣組件的狀態則用reducer的方法名進行區分，一個reducer有本身單獨的state。因此只要聲明todos、visibilityFilter的reducer，就能夠直接經過state.todos、state.visibilityFilter獲取對應reducer的state。這一點跟非redux寫法（一個組件一個對應的state）大不相同。