React Redux 是 Redux 的官方React UI绑定层。它让您的 React 组件从 Redux 存储中读取数据，并将操作分派到存储以更新状态。
换句话说：react-redux就是用于连接redux和react的。

基础使用

Provider组件

  1. import { render } from 'react-dom'
  2. import { StrictMode } from 'react'
  3. import { BrowserRouter } from 'react-router-dom'
  4. import store from '@/store'
  5. import { Provider } from 'react-redux'
  6. import App from './App'
  8. render(
  9.   <StrictMode>
  10.     <BrowserRouter>
  11.       <Provider store={store}>
  12.         <App />
  13.       </Provider>
  14.     </BrowserRouter>
  15.   </StrictMode>,
  16.   document.getElementById('root')
  17. )

然后我们怎么使用呢？

  • 通过hooks使用:useSelector ```typescript export interface DefaultRootState {}

export function useSelector( selector: (state: TState) => TSelected, equalityFn?: (left: TSelected, right: TSelected) => boolean ): TSelected;

  2.    - 参数1：是一个函数，`state`参数是`Store`里面的数据，返回值就是`useSelector`的返回值得到的数据。推荐将第一个参数定义到函数组件外面，每次当前函数组件渲染的时候，不会生成新的函数进行执行。(这样只会在初始化的时候，渲染一次)。
  3.    - `selector`函数还带有订阅的功能，只要store进行了改变，`selector`函数也会执行。
  4.       - **注意：**`**selector**`**应该是一个纯函数，因为它可能会潜在的，在任意时间点，执行多次。**
  5.    - 参数2：也是一个函数（可选）。表示前后两次的返回值是否相等，如果相等则还是用原来的值，如果不相等，则是用新的值。
  6.       - 如果不传，则是`===`比较。我们可以自定义比较的函数。
  7.       - `react-redux`有个自带的`shallowEqual`比较函数。表示浅比较。
  8. <a name="qVx4c"></a>
  9. ### `selector`的性能优化
  10. 起因：因为`selector`的函数带有订阅功能，即使我们改动的不是当前的`selector`返回的数据，`selector`对应的函数也会重新执行，这样的话，如果`selector`中有一些复杂的逻辑运算，就会造成性能瓶颈，有不必要的函数执行。
  12. 解决方法：使用`reselect`库中的`createSelector`
  14. `createSelector`方法返回一个`memoized selector functions`，也就是如果每一个`selector`的返回值不变的话，最后的参数函数也不会执行。
  15. ```typescript
  16. const makeSelectStudentData = () =>
  17.   createSelector(
  18.     (state: StoreType) => {
  19.       const { loading } = state.student
  20.       console.log('loadingSelector')
  21.       return loading
  22.     },
  23.     loading => {
  24.       console.log(loading, 'result')
  25.       return {
  26.         loading
  27.       }
  28.     }
  29.   )

这里的loadingSekector每次都会执行打印，但是result却会比较，如果loading值没有变的话，那就不执行createSelector最后一个参数函数。而且这个方法至少需要两个参数。