react redux

react react教学

参考文档: http://www.redux.org.cn

redux

1、如何引入

import { createStore } from 'reudx';

2、创建store

const store = createStore(fn)；//fn是一个函数。

3、描述行为

const add = {
    type: "ADD"
}
const dec = {
    type: "DEC"
}

4、reducer函数创建

//对于它不同的行为，我们要返回不同的值。

const default = 0;
function fn(state = default, action){
    switch (action.type){
        case "ADD": 
            return ++state;
            break;
        case "DEC":
            return --state;
            break;
        default:
            return state
    }
}

5、store的使用

var state = store.getState();
store.dispatch()——触发一个行为
store.subscribe()——添加监听事件
/**
 * Created by mapbar_front on 2017/11/18.
 */
import React, { Component } from 'react';
import { render } from 'react-dom';
//第三、createStore使用reducers得到store对象
import { createStore } from 'redux';
const store = createStore(reducer);
console.log(store);
//第四、store这个对象，是一个含有dispath、getState、subscribe三个方法的对象。
//dispath——用来触发一个行为。
//getState——用来得到当前stote对象的状态
//subscribe——用来注入监听store对象改变的函数。
//第一、action是一种行为。用一个对象定义。
const add = {
    type: 'ADD'
};
const dec = {
    type: 'DEC'
};
//2、reducer函数
function reducer(state = 0, action) {
    switch (action.type){
        case 'ADD':
            return ++state;
            break;
        case 'DEC':
            return --state;
            break;
        default:
            return state
    }
}

class App extends Component{
    constructor(props){
        super(props);
        this.state = {
            number: 0
        }
    }
    addEvent(){
        store.dispatch(add)
    }
    decEvent(){
        store.dispatch(dec)
    }
    componentDidMount(){
        var _this = this;
        store.subscribe(function () {
            console.log(store.getState());
            _this.setState({
                number: store.getState()
            })
        })
    }
    render(){
        return (
            <div>
                <h1>hello</h1>
                <button onClick={()=>this.decEvent()}>-</button>
                    <span>name:{ store.getState() }</span>
                <button onClick={()=>this.addEvent()}>+</button>
            </div>
        )
    }
}
render(<App />,document.getElementById('root'));

第二章节：搭配react。

import { Provider } from 'react-redux';
<Provider store={store}></Provider>
import { connect } from 'react-redux';
export default connect((state)=>{
    return {
        state:state
    }
})(App)

————————————————————————————示例和场景——————————————————————————————
//开始状态下{}；

//登录之后{ userName: 'mapbar_front',password: 123456}

//Other界面，编辑用户名称，{ userName: 'liwudi',password: 123456}

//最后,在home界面，我的用户名称发生改变。

核心逻辑：