首先來說說什么是React-Redux，它是Redux的官方React綁定庫。能夠使你的React組件從Redux store中讀取數據，并且向store分發actions以更新數據。
React-Redux 提供<Provider/>組件，能夠使你的整個app訪問到Redux store中的數據。
React-Redux提供一個connect方法能夠讓你把組件和store連接起來。
首先看一個實際應用中使用connect的例子：
import { connect } from 'react-redux'
const Home = props=>{
// 獲取數據
const { user, loading, dispatch } = props
// 發起請求
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)
現在使用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)
// 發起請求
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和分發actions。
hooks需要在函數組件中使用，不能在React類中使用hooks。
使用hooks和connect()一樣，需要將應用包裹在<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對象中提取數據(state)。
注意：selector函數應該是個純函數，因為可能在任何時候執行多次。
import React from 'react'
import { useSelector } from 'react-redux'
export const CounterComponent = () => {
const counter = useSelector(state => state.counter)
return <div>{counter}</div>
}
selector函數被調用時將會被傳入Redux store的整個state，作為唯一的參數。每次函數組件渲染時，selector函數都會被調用。useSelector()同樣會訂閱Redux的store，并且在分發action時，都會被執行一次。
selector和connect的mapStateToProps的差異：
selector函數的返回值會被用作調用useSelector() hook時的返回值，可以是任意類型的值。
當分發action時，useSelector會將上次調用的結果與當前調用的結果進行引用（===）比較，不一樣會進行重新渲染。
useSelector()默認使用嚴格比較===來比較引用，而非淺比較。
selector函數不會接收ownProps參數，但是props可以通過閉包獲取使用或者通過使用柯里化的selector函數。
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被分發后，useSelector()對selector函數的返回值進行引用比較===，在selector的值改變時會觸發re-render。與connect不同，useSelector()不會阻止父組件重渲染導致的子組件重渲染的行為，即使組件的props沒有發生改變。
如果想要進一步的性能優化，可以在React.memo()中包裝函數組件。
const CounterComponent = ({ name }) => {
const counter = useSelector(state => state.counter)
return (
<div>
{name}: {counter}
</div>
)
}
export const MemoizedCounterComponent = React.memo(CounterComponent)
相等比較和更新
當函數組件渲染時，會調用提供的selector函數結果作為useSelector返回值返回。如果selector執行過且沒有發生變化，則會返回緩存的結果。
useSelector()默認的比較模式是嚴格引用比較===，也就是僅僅在selector函數執行的結果與上次的結果不同時才會觸發重渲染。而connect()使用淺比較來比較mapState執行后的結果，從而決定是否觸發重渲染。
mapState的單個屬性被綁定到一個組合對象上返回，connect()會去比較各個字段。而useSelector()會返回一個對象，每返回一個新的對象將進行強制re-render。如果要從store中獲取多個值，則應該：
useSelector()調用多次，每次返回一個字段值。
使用Reselect或類似的庫創建記憶化的selector函數，從而在一個對象中返回多個值，但是僅僅在其中一個值改變時才返回新的對象。
useSelector使用箭頭函數創建會導致每次渲染組件都會創建一個新的selector函數。這樣的selector函數并沒有維持內部狀態，使用reselect庫中的createSelector創建的selector函數會含有內部狀態，所以使用時必須小心。
當selector函數依賴狀態時確保函數聲明在組件之外，避免相同的selector函數在每次渲染時被重復創建。
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函數作為useSelector的equalityFn參數。
這個可選的參數使得我們可以使用Lodash的_.isEqual()和Immutable.js的比較功能。
import { shallowEqual, useSelector } from 'react-redux'
const selectedData = useSelector(selectorObject, shallowEqual)
當然，也可以將shallowEqual重新封裝成一個函數來調用。
import { shallowEqual } from 'react-redux'
export function useShallowEqualSelector(selector) {
return useSelector(selector, shallowEqual)
}
useDispatch
const dispatch = useDispatch()
作用：返回Redux store中對dispatch函數的引用。
當使用dispatch函數將回調傳遞給子組件時，建議使用useCallback函數將回調函數記憶化，防止因為回調函數引用的變化導致不必要的渲染。
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 的引用。
注意：應該將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 參數指定一個可選的 context。在構建復雜可復用的組件時，若不想讓私人 store 與使用這個組件的用戶的 Redux store 發生沖突，可以使用這種方法。
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 函數來創建自定義 hook，從而訪問可選的 context。
