作者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/cn.aspx?n=bbs/Ajax/M.1509784737.A.EE7.html
1F：→ warpower668: Shouldcomponentupdate? 03/17 02:05