首先来说说什么是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。
