# React Redux 精簡版 ## 原理 * ![](https://i.imgur.com/VSasXpw.png) ## 整體流程 * 在components同層建立redux資料夾 * 在redux資料夾建立store.js & XXX_reducer.js * store.js : 基本不修改 * ![](https://i.imgur.com/P7kjSTv.png) * XXX_reducer.js : 依照邏輯變更從store.js收到的值在回傳給store.js * ![](https://i.imgur.com/yrkGVWb.png) * 要用redux的component(template)引入store * ![](https://i.imgur.com/yRGZ5Iq.png) * 該component : 取得存儲在store.js的state * 獲取state(狀態) * store.getState() * ![](https://i.imgur.com/jpciA0I.png) * 發出(變更的)要求 * store.dispatch({type:XXX, data:XXX}) * ![](https://i.imgur.com/JT5G6pt.png) * 當redux的state變化時就會執行 * store.subscribe(()=>{ 這裡會被執行 }) * 用subscribe從最外面包住ReactDOM.render() * ![](https://i.imgur.com/i6vJidw.png) * 也可以在各個component裡面subscribe,只是這種做法有幾個要用就要寫幾次