作者steven11329 (清新柳橙)
看板Ajax
標題Re: [問題] redux + react 改state的值
時間Sat Nov 4 22:29:09 2017
setState 會觸發 state update,
因此 render() 會再被叫起來，
你需要的是在 Switch class 裡加上 shouldComponentUpdate(nextProps, nextState)
根據 React life cycle 這 function 會在 render() 之前決定是否真的要re-render。
retrun true 就是要re-render
以下是程式碼
class Button extends React.Component {
render() {
return <div className="btn">button</div>
}
}
class Switch extends React.Component {
constructor(props) {
super(props);
this.state = store.getState().data[this.props.index];
}
//-----加入這塊-----
shouldComponentUpdate(nextProps, nextState) {
if (this.state.on === nextState.on) {
return false;
}
return true;
}
/-----加入這塊-----
render() {
console.log(`update: switch-${this.props.index}`);
return <div
className={"switch" + (this.state.on ? " switch-on" : "")}
onClick={this.update.bind(this)}
>
<Button />
</div>;
}
update() {
store.dispatch({
type: "ChangeSwitch",
num: this.props.index
});
}
refresh() {
this.setState(store.getState().data[this.props.index]);
}
componentDidMount() {
this.unsubscribe = store.subscribe(this.refresh.bind(this));
}
componentWillUnmount() {
this.unsubscribe();
}
}
let reducer = function (state, action) {
console.log(state);
console.log(action);
switch (action.type) {
case "ChangeSwitch":
let newData = state.data.map((obj, i) => {
if (i === parseInt(action.num)) {
return { on: !obj.on };
} else {
return obj;
}
});
console.log(state.data);
console.log(newData);
return Object.assign({ data: newData });
default:
return state;
}
};
let store = 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"));
另外 Redux 在配合 React上有 react-redux package 可以用。
參考教學：
http://redux.js.org/docs/basics/UsageWithReact.html
寫得算簡單但是要看懂還是要花點時間。
差別在於你可以不用一直設定setState它是透過props來傳遞。
以上。
--
人生宗旨：摔不死！那就再來吧！
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.45.10.203
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Ajax/M.1509805757.A.D6D.html
1F：推 nvizero: 感謝你 11/06 21:16