上一篇：react入门
我想要使用react主要的目的在于想要实现组件化，减少类似使用jquery产生的大量数据逻辑与dom操作逻辑，而使用redux最大的目的是想要实现react组件之间state的共享及全局改变组件state。
react组件通过store.subscribe()函数注册监听函数，当数据改动时就会调用subscribe()所注册的函数，通过注册函数改变响应组件的state，而store的数据改动只能通过store.dispatch()函数发送action，创建store是必须要注册reducer(分解器)。一个完整的状态为调用store.dispatch()发送action给reducer，由reducer解析事件返回更新后的state，redux在store发生变化时会通知注册了的事件监听队列，改变响应组件的state。
下面我举一个通过一个react组件去改变另一个组件的列子。
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react</title>
</head>
<body>
<div id="root">
</div>
<div id="example"></div>
<script src="../src/js/jquery.min.js"></script>
<script src="../src/js/react.production.min.js"></script>
<script src="../src/js/react-dom.production.min.js"></script>
<script src="../src/js/redux.min.js"></script>
<script src="../src/js/react-redux.min.js"></script>
<script src="../src/js/babel.min.js"></script>
<script src="../src/index.js" type="text/babel"></script>
</body>
</html>
index.js:
//初始化全局state
const globalStateInit = {val:100}
//编写reducer（分解器）
function reducer(state, action) {
const {obj} = action;
switch (action.type) {
case "increment":
return {...state,[obj]:state[obj]+1};
case "decrement":
return {...state,[obj]:state[obj]-1};
default:
return state;
}
}
const store = window.Redux.createStore(reducer,globalStateInit);
class Clicks extends React.Component{
constructor(props){
super(props) //js规定子类中若想使用this必须super()，继承父类的，react中想要使用props的话，也必须继承父类的props属性
//this.props = porps; //如此方式会导致ReferenceError: "porps is not defined" react-dom.production.min.js:117:150错误，应为react-dom需要React.Component中的props，自定义的无法满足条件
this.a = 3;
this.state = {val:1};
}
b = 5; //声明变量，指向都是this
fnct = () =>{ //箭头函数的this使用的是外部this，不用想其他函数一样bind(this)
alert(this.a+" "+this.refs.tx.value+" "+this.b+" "+this.props.val.tr) //refs用于组件内部引用dom
this.state.val ++;
this.setState(this.state)
}
// increment(){
// //发送增加的action
// store.dispatch({type:"increment",obj:"val"});
// }
increment = () => {
store.dispatch({type:"increment",obj:"val"})
}
// decrement(){
// //发送减少的action
// store.dispatch({type:"decrement",obj:"val"})
// }
decrement = ()=>{
store.dispatch({type:"decrement",obj:"val"})
}
render(){
return (<div>
<input type="text" ref="tx" style={{width:100}} value={this.props.val.te} />
<input type="text" style={{width:50}} value={this.state.val} />
<button onClick={this.fnct}>click</button>
<button onClick={this.increment}>+</button>
<button onClick={this.decrement}>-</button>
</div>);
}
}
ReactDOM.render(<Clicks val={{te: 123, tr:"tr"}} />, $("#root")[0]);
class Counter extends React.Component{
constructor(props) {
super(props)
this.state = store.getState();
this.onchange = this.onchange.bind(this)
}
onchange(){
this.setState(store.getState());
}
//必须为函数，箭头函数不行
// onchange = ()=>{
// this.setState(store.getState());
// }
componentDidMount(){
store.subscribe(this.onchange)
}
componentWillUnmount(){
store.unsubscribe(this.onchange)
}
render(){
return (<div>{this.state.val}</div>);
}
}
ReactDOM.render(<Counter/>,$("#example")[0])
// let str = {a:1,b:2,c:{d:3}}
// console.log({...str})
效果如下图：
相关链接：http://cn.redux.js.org/ https://www.jianshu.com/p/786e7174b0c2