React学习记录: Redux

入门
官网
【React.js模仿大众点评webapp】实战教程（5）redux基础

父向子孙传值用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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!