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

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

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

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

import { connect } from 'react-redux'

const Home = props=>{
    // 獲取數(shù)據(jù)
    const { user, loading, dispatch } = props
    
    // 發(fā)起請求
    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ā)起請求
    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對象中提取數(shù)據(jù)(state)。

注意：selector函數(shù)應(yīng)該是個純函數(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)用時將會被傳入Redux store的整個state，作為唯一的參數(shù)。每次函數(shù)組件渲染時，selector函數(shù)都會被調(diào)用。useSelector()同樣會訂閱Redux的store，并且在分發(fā)action時，都會被執(zhí)行一次。

selector和connect的mapStateToProps的差異：

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

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

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

• selector函數(shù)不會接收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()對selector函數(shù)的返回值進(jìn)行引用比較===，在selector的值改變時會觸發(fā)re-render。與connect不同，useSelector()不會阻止父組件重渲染導(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ù)組件渲染時，會調(diào)用提供的selector函數(shù)結(jié)果作為useSelector返回值返回。如果selector執(zhí)行過且沒有發(fā)生變化，則會返回緩存的結(jié)果。

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

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

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

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

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

當(dāng)selector函數(shù)依賴狀態(tài)時確保函數(shù)聲明在組件之外，避免相同的selector函數(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ù)。
  這個可選的參數(shù)使得我們可以使用Lodash的_.isEqual()和Immutable.js的比較功能。

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

const selectedData = useSelector(selectorObject, shallowEqual)

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

import { shallowEqual } from 'react-redux'

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

useDispatch

const dispatch = useDispatch()

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

當(dāng)使用dispatch函數(shù)將回調(diào)傳遞給子組件時，建議使用useCallback函數(shù)將回調(diào)函數(shù)記憶化，防止因為回調(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()作為首選，只有在個別場景下才會需要使用它，比如替換 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ù)指定一個可選的 context。在構(gòu)建復(fù)雜可復(fù)用的組件時，若不想讓私人 store 與使用這個組件的用戶的 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。