DEV Community

JacobHsu
JacobHsu

Posted on

React with Redux

Why did we add two libraries?

React is split into two separate libraries.

React knows what a component is and how to make components work together.

ReactDOM knows how to take a component and make it show up in the DOM.

React中使用Redux, React-Redux, Redux Thunk(Middleware)處理Request基礎實作 + 觀念釐清

react-redux提供了Provider跟connect這兩個函數(component),設定元件的state與props,並跟redux中的createStore函數配合,按照使用者的行為改變存在store中的state。

react-thunk作為Middleware則是處理redux中action函數裡request非同步的問題。

Alt react-redux

Redux Cycle

Alt Redux Cycle

redux也要能和react溝通,所以才要安裝react-redux,並利用其中的 Provider 跟 connect 這兩個函數作為redux跟react之間溝通state的方法。

安裝redux-thunk之後可以做到的事情:讓 actionCreator 可以回傳action物件,也可以回傳一個函數!

Alt react-redux

without redux
Alt redux

使用redux的關鍵思維是:
能不能把元件們再拆成:"只"負責畫面顯示&"只"負責資料處理這兩種呢?
這樣之後畫面顯示部分的可以重複使用

Top comments (0)