關於redux的一些學習筆記

redux是用於管理react狀態的一個狀態管理器

核心有三大部分組成--action、reducer、store

action：是觸發state改變的狀態，是普通的js對象，語義做用；

const addAction = {
    type: 'ADD_ITEM',
    text: 'to add a new item'
}

reducer：純函數 傳遞action以觸發state改變的函數，傳入state和action，作一些符合action的處理，建立state的副本，並返回這個副本。

function todoApp(state, action) {
    switch(action.type){
        case 'ADD_ITEM': 
        return Object.assign({},state,{
            ...state.todos,
            {text: action.text, completed: true}
        });
    }
}

store：存儲state的地方。
方法：
getState():獲取state
dispatch(action): 更新state
subscribe(listener): 註冊監聽器，返回一個函數，調用此函數可註銷監聽器。

建立store：

import { createStore } from 'redux';
import rodoApp from './reducers';

let store = createStore(todoApp);

單向數據流--數據生命週期：
調用store.dispath(action)；
redux store會自動調用傳入的reducer函數；
根reducer會把多個子reducer輸出合併成一個單一的reducer樹；
redux store保存根reducer返回的完整state樹，該state樹就是下一個state，全部調用store.subscribe(listener)的監聽器都將被調用，在監聽器中能夠經過調用store.getState()來獲取當前的state。

配合react（redux自己和react沒有關係）
安裝react綁定庫：
npm install --save react-redux
其基於react的容器組件與UI組件相分離的思想來開發。

	UI組件	Container組件
是否直接使用Redux	否	是
數據來源	props	監聽redux state
數據修改	從props調用回調函數	向redux派發action
調用方式	手動	一般由react redux生成
做用	展現骨架、樣式	數據獲取、狀態更新

容器組件用connect()方法生成。【該方法內部作了一些性能優化，避免了不少沒必要要的rerender】
其本質是經過store.subscribe()從redux state樹中讀取部分數據，並經過props將這些數據傳給對應的UI組件。

connect()的用法

import { connect } from 'react-redux'；
connect(mapStateToProps, mapDispathToProps)(TodoList)；

const getVisibleTodos = (todos, filter) => {
    switch(filter) {
        case 'SHOW_COMPLETED':
        return todos.filter(...)
        // ...
    }
}
const mapStateToProps = state => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispathToProps = dispatch => {
    return {
        onTodoClick: id => {
            dispatch(toggleTodo(id))
        }
    }
}

mapStateToProps: 該函數用於指定如何將當前的redux store的state映射到對應UI組件的props中。
mapDispathToProps：該函數接收dispatch()方法並返回指望注入到UI組件props中的回調函數。