React和Redux是相互獨立的兩個框架。

一、React

React 是一個採用宣告式，高效而且靈活的用來構建使用者介面的框架。具體參考React中文。

React解決的問題（或者說React的優勢）是：

（1）通過給予程式設計師一個虛擬DOM供其渲染，這樣就避免了修改真正的DOM。並且當頁面狀態改變時，會對頁面的DOM做最小化修改，並重新呈現。這樣就可以（至少在理論上），讓程式設計師徹底不用考慮DOM效能。React 核心開發者、有 React API 終結者之稱的 Sebastian Markbåge 撰寫的React設計思想，能讓你從更高的位置來重新看待React。

（2）React的另一個優勢是函式式反應型程式設計(FRP)。在傳統的程式設計中，一個包含所有物件的程式中，各個物件的狀態都對應不同響應行為。當其中一個物件的狀態出現異常的時候，其他物件就會不知所措，導致Bug或崩潰。這種舊的方式已經用了很久了，這就是為什麼當頁面崩潰時，用"重新整理網頁或者重啟瀏覽器"會這麼的管用。

       與之相反，在FRP中，頁面的狀態被限制在一個特定的區域，程式設計師只能用無狀態的function來處理狀態改變。然後，這些狀態改變的結果會進入React的管道，被依次渲染。這種頁面渲染方式，有效的解決了上述的頁面崩潰。

React的核心是將UI元件化，由資料驅動UI的展現。但是如何管理資料模型、元件與資料模型之間的通訊，react並沒有很好的解決方案。

二、Redux

如果你不知道是否需要 Redux，那就是不需要它。

Redux 的創造者 Dan Abramov 又補充了一句。

只有遇到 React 實在解決不了的問題，你才需要 Redux 。

阮一峰

• 使用者的使用方式複雜
• 不同身份的使用者有不同的使用方式（比如普通使用者和管理員）
• 多個使用者之間可以協作
• 與伺服器大量互動，或者使用了WebSocket
• View要從多個來源獲取資料

如果遇到以下兩個問題時，你可能需要用到Redux了：

（1）跨頁面資料共享

（2）子元件通訊

Redux是一個流行的JavaScript框架，為應用程式提供一個可預測的狀態容器。Redux基於簡化版本的Flux框架，Flux是Facebook開發的一個框架。在標準的MVC框架中，資料可以在UI元件和儲存之間雙向流動，而Redux嚴格限制了資料只能在一個方向上流動。 具體參考

三、redux是怎麼解決React痛點的？

（1）通過react-redux提供的Provider元件,在根元件外面包一層，這樣根元件，以及所有的子元件都能拿到store。實現的原理是基於React自身提供的context屬性，但是react官方不推薦直接在元件中使用this.context。所以react-redux提供了另一種方法connect，通過connect將普通的UI元件升級為容器元件，同時將獲取store的細節也一併封裝在生成容器元件的程式碼中，從而容器元件可以直接拿到store。

<Provider store={store}>
    <App/>
</Provider>

class Foo extends React.Component{
    render() {
    const { text } = this.props;
    return <div>{text}</div>;
  }
}
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Foo);

（2）使用純函式修改state，保證state變化可預測。每次更改都返回一個全新的state。
（3）遵守容器元件與展示元件分離的原則。這是redux一個重要的思想，容器元件和展示元件各司其職。

通過將元件分為智慧元件和傻瓜元件，在智慧元件處理資料邏輯，並將store中的state轉變為props傳遞給展示元件，對應mapStateToProps，將注入了dispatch的函式作為props傳遞給展示元件，對應mapDispatchToProps，通過發起action，更新state完成改變資料狀態。傻瓜元件僅僅通過容器元件傳進來的props進行UI展示，以及操作回撥。感知不到redux的存在，脫離redux框架也能使用，儘量保持無狀態(可包含少量的UI狀態)。