作者nvizero (victor.st)
看板Ajax
標題[問題] redux + react 改state的值
時間Sat Nov 4 16:38:54 2017
我產生了三個 元件 A，B，C
但是元件會同步的更新
應該是要要A按了更新A的狀態就好
但是我按了A B，C都會跟著動
以下是程式碼。。。。
class Button extends React.Component{
render(){
return <div className="btn"></div>
}
}
class Switch extends React.Component{
constructor(props){
super(props);
// 1. 初始化狀態資料，資料從 Redux 取得
// this.state=store.getState();
this.state=store.getState().data[this.props.index];
}
render(){
// 2. 使用者可點擊畫面
return <div className={"switch"+(this.state.on?" switch-on":"")} onClick={this.update.bind(this)}>
<Button/>
</div>;
}
// 3. 派送點建立：使用者點擊，觸發狀態的變化，直接派送給 Redux 做處理
update(){
store.dispatch({
type:"ChangeSwitch",
num: this.props.index
});
}
// 以下程式是用來連接 React 和 Redux
// 4. 回應狀態變化：Redux 處理完成，返回 React 接收最新狀態，並觸發畫面的更新
refresh(){
// this.setState(store.getState());
this.setState(store.getState().data[this.props.index]);
}
// 連結點建立：註冊狀態改變的通知處理函式，回應 Redux 中的狀態變化
componentDidMount(){
this.unsubscribe=store.subscribe(this.refresh.bind(this));
}
componentWillUnmount(){
this.unsubscribe();
}
}
let store ;
let reducer=function(state, action){
// 根據 action 的 type，來執行狀態更新的動作
console.log(state);
console.log(action);
switch(action.type){
case "ChangeSwitch":
// return {on:!state.on};
console.log( store.getState().data[action.num] );
// store.getState().data[action.num] = {on:true};
// return {data:[action.num]};
return state;
default:
// console.log(state);
return state;
}
};
// store = Redux.createStore(reducer, {on:false});
store = Redux.createStore(reducer, {
data:[{on:false}, {on:true}, {on:true}]
});
ReactDOM.render(<Switch index="0" /> , document.getElementById("switch-0"));
ReactDOM.render(<Switch index="1" /> , document.getElementById("switch-1"));
ReactDOM.render(<Switch index="2" /> , document.getElementById("switch-2"));
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 27.247.133.51
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Ajax/M.1509784737.A.EE7.html
1F：→ warpower668: Shouldcomponentupdate? 03/17 02:05