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