React學習記錄: Redux

入門
官網
React.js模仿大衆點評webapp 實戰教程（5）redux基礎
React.js 小書

父向子孫傳值用props

react子組件如何向父組件傳值

react子組件如何向父組件傳值

組件之間傳值

Redux實例

import { createStore } from 'redux'
export default function () {
// 下面這一段代碼，就是 https://github.com/reactjs/redux 中的入門demo


// 第一步：定義計算規則，即 reducer
//Store 收到 Action 之後，必須給出一個新的 State，這樣 View 纔會發生變化。這種 State 的計算過程就叫作 Reducer。
function counter(state = 0, action) {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1
        case 'DECREMENT':
            return state - 1
        default:
            return state
    }
}

// 第二步:根據計算規則生成 store
let store = createStore(counter)

// 第三步: 定義數據（即 state）變化以後的派發規則(根據數據變化定義監聽的函數)
store.subscribe(() => {
    console.log('current state', store.getState())
})

// 第四步： 觸發數據變化，即action發生變化，這裏是action對象的type屬性（type屬性是必須有的）
store.dispatch({type: 'INCREMENT'})
store.dispatch({type: 'INCREMENT'})
store.dispatch({type: 'DECREMENT'})

}

Redux with React

chrome中兩個開發插件
redux-devtools
react-devtools