React学习记录: Redux

前端之家收集整理的这篇文章主要介绍了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

猜你在找的React相关文章