---
title: Redux
tags: Front-end, Redux, 學習筆記
---
# Redux
## 查無此人的概論

404 Not Found

### Flux
因為作者說了，這玩意是從Flux的概念來的，所以先提一下Flux。

故事(?)要從React的state跟props開始說起。在React中，```props``` 為從父元件傳遞下來的屬性值，子元件沒有更動權利；```state``` 為元件自己的屬性值，可以透過setState更改。

這會造成一個問題，當專案越大的時候，可能很多地方都會用到同樣的資料，但當一個元件去更動資料時，不是每個元件都會知道。

所以有人提供一個解決方案，單向資料流。

> 圖片來源：[Flux 筆記 « AndyYou's Blog](http://andyyou.logdown.com/posts/241839-flux-notes)
>

元件要對資料進行更動時，會觸發action，然後經由這個路徑一層一層把更新的資料發布出去，讓所有用到這個資料的元件都知道，如此便比較容易知道。

好感人喔。

因為Flux不是重點，所以就跳過Flux的名詞解釋了，自己去看。

> 參考資料：[【Day17】 從哪來到哪去 - Data Flow - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天](https://ithelp.ithome.com.tw/articles/10196024)

### Redux咧？（敲碗

承上文，Redux參考了Flux提出的資料流概念，


- Actions Creator
- Reducer
- Store

## 配置

npm install redux

## 爆炸的資料來源
- [Redux](https://chentsulin.github.io/redux/index.html)
- [一些自己寫 React 的好習慣- lifecycle method 跟 state 管理 – 陳冠霖 – Medium](https://medium.com/@as790726/%E4%B8%80%E4%BA%9B%E8%87%AA%E5%B7%B1%E5%AF%AB-react-%E7%9A%84%E5%A5%BD%E7%BF%92%E6%85%A3-lifecycle-method-%E8%B7%9F-state-%E7%AE%A1%E7%90%86-b37a12da968b)
- [Flux 筆記 « AndyYou's Blog](http://andyyou.logdown.com/posts/241839-flux-notes)
- [【Day15 React】React Flux 架構介紹 ](https://ithelp.ithome.com.tw/articles/10192712)