[問題] redux + react 改state的值

看板Ajax作者nvizero (victor.st)時間7年前 (2017/11/04 16:38)推噓0(0推 0噓 1→)

留言1則, 1人參與討論串1/2 (看更多)

我產生了三個元件 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://www.ptt.cc/bbs/Ajax/M.1509784737.A.EE7.html