react-redux有什麼用

「react-redux」的作用：1、將元件分為了容器元件和UI元件；2、取代redux中的「store.subscribe」監聽元件的狀態變化，用於渲染元件；3、配合redux使用，讓元件輕鬆的拿到全域狀態，方便組件間的通訊。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react-redux有什麼用

react-redux配合redux使用，將redux定義的store資料注入到元件中，可以讓元件輕鬆的拿到全域狀態，方便元件間的通信。讓react組價與redux資料中心（store）連結起來，呼叫dispatch函數修改資料狀態後，觸發透過subscribe註冊更新視圖的處理邏輯，包括需要渲染的資料和更新資料的函數。

它主要用於在入口處包裹需要用到Redux的元件。基本上就是將store放入context裡。

因為redux和元件的耦合度太高，為了解耦，所以設計了redux。一旦我們引進了react-redux，我們便不再需要使用store的subscribe自己去訂閱狀態了。 UI元件就像普通元件一樣內部沒有redux的身影。可讀性更高。

作用1

將元件分為了容器元件和UI元件，UI元件透過props來取得狀態和操作狀態的方法。

作用2

透過Provider元件來取代redux中的store.subscribe來監聽元件的狀態變化，用來渲染元件。

作用3

在容器元件中透過核心API connect來連接UI元件和redux，connect是一個高階函數，第一個參數接收的是兩個回呼函數，回呼函數1：將接收一個state，然後傳回一個物件物件中包含了UI元件想要的狀態。回呼函數2：接收一個dispatch，傳回一個對象，物件中包含了UI元件想要操作狀態的方法。同時還有一個簡寫方法，就是第二個參數直接傳入一個對象，而這個對象包含操作狀態的方法。 （核心：就是將state和dispatch對應到UI元件的props中）

核心程式碼

export default connect(
    state => ({count: state}),
    dispatch => {
        return {
            increment: number => dispatch(increment(number)),
            decrement: number => dispatch(decrement(number)),
        }
    }
)(Counter)

下面是簡寫形式

export default connect(
    state => ({count: state}),
    {increment,decrement}
)(Counter)

推薦學習：《react影片教學》

以上是react-redux有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！