上一篇：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