react.js框架Redux基础案例详解

npm install redux react-redux
#基于react，我们在前面已经安装过了

import {createStore} from "redux";
import todoApp from "./reducers";
let store = createStore(todoApp);

function myFun(state,action){
  // ...
}

//测试数据
let info = {
    title:"测试标题",
    clicknum:0
};

// 把数据通过参数船体
export  default (state = info, action)=>{


    return state; //返回的就是测试数据
}

import InfoReduce  from "./../redux/InfoReduce";

import {createStore} from "redux";
let store = createStore(InfoReduce);

// 定义一个名叫InfoDetail的组件
class InfoDetail extends  React.Component{
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            infoData:store.getState() //通过store对象的方法获取数据
        };
      }


        render(){
            return <div>
                <h2>新闻标题：{this.state.infoData.title}</h2>
                <span>点击量：{this.state.infoData.clicknum}</span>
                <p><button>修改点击量</button></p>
            </div>
        }
}

export  default (state, action)=>{}

<button onClick={this.addClick.bind(this)}>修改点击量</button>

        addClick(){
            //修改state
            store.dispatch({
                type:"INFO_CLICK"
            })

            this.setState({ //更新state
                infoData:store.getState()
            })
        }

//测试数据
let info = {
    title:"测试标题",
    clicknum:0
};

// 把数据通过参数船体
export  default (state = info, action)=>{

    if (action.type == "INFO_CLICK"){
        let oldNum = state.clicknum;
        oldNum++;

        // 返回新的数据
        return Object.assign({},state,{clicknum:oldNum});
    }

    return state; //返回的就是测试数据
}