首先來說說什么是React-Redux讲岁，它是Redux的官方React綁定庫刽射。能夠使你的React組件從Redux store中讀取數(shù)據(jù)，并且向store分發(fā)actions以更新數(shù)據(jù)。

React-Redux 提供<Provider/>組件嬉橙，能夠使你的整個(gè)app訪問到Redux store中的數(shù)據(jù)盗扇。

React-Redux提供一個(gè)connect方法能夠讓你把組件和store連接起來祷肯。

首先看一個(gè)實(shí)際應(yīng)用中使用connect的例子：

import { connect } from 'react-redux'

const Home = props=>{
    // 獲取數(shù)據(jù)
    const { user, loading, dispatch } = props
    
    // 發(fā)起請(qǐng)求
    useEffect(()=>{
        dispatch({
            type:'user/fetchUser',payload:{}
        })
    }, [])
    
    // 渲染頁面
    if(loading) return <div>loading...</div>
    return (
        <div>{user.name}<div>
    )
}

export default connect(({ loading, user })=>({
    loading:loading.effects['user/fetchUser'],
    user:user.userInfo
}))(Home)

現(xiàn)在使用useDispatch useSelector改造一下上面的代碼：

import { useDispatch, useSelector } from 'react-redux'

const Home = props => {
    
    const dispatch = useDispatch()
    
    const loadingEffect = useSelector(state =>state.loading);
    const loading = loadingEffect.effects['user/fetchUser'];
    const user = useSelector(state=>state.user.userInfo)
    
    // 發(fā)起請(qǐng)求
    useEffect(()=>{
        dispatch({
            type:'user/fetchUser',payload:{}
        })
    },[])
    
    // 渲染頁面
    if(loading) return <div>loading...</div>
    return (
        <div>{user.name}<div>
    )
}

export default Home

再來說說hooks沉填，它是React-Redux提供用來替代connect()高階組件。這些hooks API允許不使用connect()包裹組件的情況下訂閱store和分發(fā)actions佑笋。

hooks需要在函數(shù)組件中使用翼闹，不能在React類中使用hooks。

使用hooks和connect()一樣蒋纬，需要將應(yīng)用包裹在<Provider>中猎荠。

const store = createStore(rootReducer)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

首先來看看API:

useSelector()

const result : any = useSelector(selector : Function, equalityFn? : Function)

作用：從redux的store對(duì)象中提取數(shù)據(jù)(state)。

注意：selector函數(shù)應(yīng)該是個(gè)純函數(shù)蜀备，因?yàn)榭赡茉谌魏螘r(shí)候執(zhí)行多次法牲。

import React from 'react'
import { useSelector } from 'react-redux'

export const CounterComponent = () => {
  const counter = useSelector(state => state.counter)
  return <div>{counter}</div>
}

selector函數(shù)被調(diào)用時(shí)將會(huì)被傳入Redux store的整個(gè)state，作為唯一的參數(shù)琼掠。每次函數(shù)組件渲染時(shí)拒垃，selector函數(shù)都會(huì)被調(diào)用。useSelector()同樣會(huì)訂閱Redux的store瓷蛙，并且在分發(fā)action時(shí)悼瓮，都會(huì)被執(zhí)行一次。

selector和connect的mapStateToProps的差異：

• selector函數(shù)的返回值會(huì)被用作調(diào)用useSelector() hook時(shí)的返回值艰猬，可以是任意類型的值横堡。

• 當(dāng)分發(fā)action時(shí)，useSelector會(huì)將上次調(diào)用的結(jié)果與當(dāng)前調(diào)用的結(jié)果進(jìn)行引用（===）比較冠桃，不一樣會(huì)進(jìn)行重新渲染命贴。

• useSelector()默認(rèn)使用嚴(yán)格比較===來比較引用，而非淺比較食听。

• selector函數(shù)不會(huì)接收ownProps參數(shù)胸蛛，但是props可以通過閉包獲取使用或者通過使用柯里化的selector函數(shù)。

import React from 'react'
import { useSelector } from 'react-redux'

export const TodoListItem = props => {
  const todo = useSelector(state => state.todos[props.id])
  return <div>{todo.text}</div>
}

在action被分發(fā)后樱报，useSelector()對(duì)selector函數(shù)的返回值進(jìn)行引用比較===葬项，在selector的值改變時(shí)會(huì)觸發(fā)re-render。與connect不同迹蛤，useSelector()不會(huì)阻止父組件重渲染導(dǎo)致的子組件重渲染的行為民珍，即使組件的props沒有發(fā)生改變。

如果想要進(jìn)一步的性能優(yōu)化盗飒，可以在React.memo()中包裝函數(shù)組件嚷量。

const CounterComponent = ({ name }) => {
  const counter = useSelector(state => state.counter)
  return (
    <div>
      {name}: {counter}
    </div>
  )
}

export const MemoizedCounterComponent = React.memo(CounterComponent)

相等比較和更新

當(dāng)函數(shù)組件渲染時(shí)，會(huì)調(diào)用提供的selector函數(shù)結(jié)果作為useSelector返回值返回逆趣。如果selector執(zhí)行過且沒有發(fā)生變化蝶溶，則會(huì)返回緩存的結(jié)果。

useSelector()默認(rèn)的比較模式是嚴(yán)格引用比較===汗贫，也就是僅僅在selector函數(shù)執(zhí)行的結(jié)果與上次的結(jié)果不同時(shí)才會(huì)觸發(fā)重渲染身坐。而connect()使用淺比較來比較mapState執(zhí)行后的結(jié)果秸脱，從而決定是否觸發(fā)重渲染。

mapState的單個(gè)屬性被綁定到一個(gè)組合對(duì)象上返回部蛇，connect()會(huì)去比較各個(gè)字段摊唇。而useSelector()會(huì)返回一個(gè)對(duì)象，每返回一個(gè)新的對(duì)象將進(jìn)行強(qiáng)制re-render涯鲁。如果要從store中獲取多個(gè)值巷查，則應(yīng)該：

• useSelector()調(diào)用多次，每次返回一個(gè)字段值抹腿。

• 使用Reselect或類似的庫創(chuàng)建記憶化的selector函數(shù)岛请，從而在一個(gè)對(duì)象中返回多個(gè)值，但是僅僅在其中一個(gè)值改變時(shí)才返回新的對(duì)象警绩。

useSelector使用箭頭函數(shù)創(chuàng)建會(huì)導(dǎo)致每次渲染組件都會(huì)創(chuàng)建一個(gè)新的selector函數(shù)崇败。這樣的selector函數(shù)并沒有維持內(nèi)部狀態(tài)，使用reselect庫中的createSelector創(chuàng)建的selector函數(shù)會(huì)含有內(nèi)部狀態(tài)肩祥，所以使用時(shí)必須小心后室。

當(dāng)selector函數(shù)依賴狀態(tài)時(shí)確保函數(shù)聲明在組件之外，避免相同的selector函數(shù)在每次渲染時(shí)被重復(fù)創(chuàng)建混狠。

import React from 'react'
import { useSelector } from 'react-redux'
import { createSelector } from 'reselect'

const selectNumOfDoneTodos = createSelector(
  state => state.todos,
  todos => todos.filter(todo => todo.isDone).length
)

export const DoneTodosCounter = () => {
  const NumOfDoneTodos = useSelector(selectNumOfDoneTodos)
  return <div>{NumOfDoneTodos}</div>
}

export const App = () => {
  return (
    <>
      <span>Number of done todos:</span>
      <DoneTodosCounter />
    </>
  )
}

• 使用react-redux提供的shallowEqual函數(shù)作為useSelector的equalityFn參數(shù)岸霹。
  這個(gè)可選的參數(shù)使得我們可以使用Lodash的_.isEqual()和Immutable.js的比較功能。

import { shallowEqual, useSelector } from 'react-redux'

const selectedData = useSelector(selectorObject, shallowEqual)

當(dāng)然将饺，也可以將shallowEqual重新封裝成一個(gè)函數(shù)來調(diào)用贡避。

import { shallowEqual } from 'react-redux'

export function useShallowEqualSelector(selector) {
  return useSelector(selector, shallowEqual)
}

useDispatch

const dispatch = useDispatch()

作用：返回Redux store中對(duì)dispatch函數(shù)的引用。

當(dāng)使用dispatch函數(shù)將回調(diào)傳遞給子組件時(shí)予弧，建議使用useCallback函數(shù)將回調(diào)函數(shù)記憶化刮吧，防止因?yàn)榛卣{(diào)函數(shù)引用的變化導(dǎo)致不必要的渲染。

import React, { useCallback, memo } from 'react'
import { useDispatch } from 'react-redux'

export const MyIncrementButton = memo(({ onIncrement }) => (
  <button onClick={onIncrement}>Increment counter</button>
))

export const Counter = ({ value }) => {
  const dispatch = useDispatch()
  const incrementCounter = useCallback(
    () => dispatch({ type: 'increment-counter' }),
    [dispatch]
  )

  return (
    <div>
      <span>{value}</span>
      <MyIncrementButton onIncrement={incrementCounter} />
    </div>
  )
}

useStore()

const store = useStore() 

作用：返回傳遞給組件的 Redux store 的引用桌肴。

注意：應(yīng)該將useSelector()作為首選皇筛，只有在個(gè)別場景下才會(huì)需要使用它，比如替換 store 的 reducers坠七。

import React from 'react'
import { useStore } from 'react-redux'

export const Counter = ({ value }) => {
  const store = useStore()

  return <div>{store.getState()}</div>
}

自定義 context

<Provider> 允許通過 context 參數(shù)指定一個(gè)可選的 context。在構(gòu)建復(fù)雜可復(fù)用的組件時(shí)旗笔，若不想讓私人 store 與使用這個(gè)組件的用戶的 Redux store 發(fā)生沖突彪置，可以使用這種方法。

import React from 'react'
import {
  Provider,
  createStoreHook,
  createDispatchHook,
  createSelectorHook
} from 'react-redux'

const MyContext = React.createContext(null)

export const useStore = createStoreHook(MyContext)
export const useDispatch = createDispatchHook(MyContext)
export const useSelector = createSelectorHook(MyContext)

const myStore = createStore(rootReducer)

export function MyProvider({ children }) {
  return (
    <Provider context={MyContext} store={myStore}>
      {children}
    </Provider>
  )
}

使用 creator 函數(shù)來創(chuàng)建自定義 hook蝇恶，從而訪問可選的 context拳魁。