react-redux shallowEqual useDispatch useSelector 使用方式

因为现在很多人都在用hooks来进行react开发  所以的如果想使用react-redux需要useDispatch

获取store中的数据需要 useSelector  

先看一下代码

创建store

import { createStore, applyMiddleware, compose } from "redux";
import thunk from 'redux-thunk'
import cRducer from "./reducer";
// redux-devtools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(cRducer, composeEnhancers(
  applyMiddleware(thunk)
))

export default store

创建store这里就不多说什么了  和  在class 中使用时差不多  compose可以看这篇文章react中的compose()_大路宽宽的博客-CSDN博客

合并reducer

import { combineReducers } from 'redux-immutable';

...引用的就不用多说了吧

const cRducer = combineReducers({
  recommend: recommendReducer,
  player: playerReducer,
  toplist: toplistReducer,
  songList: songsReducer,
  themeHeader: themeHeaderReducer,
  search: searchReducer,
  songDetail: songDetailRducer,
  loginState: loginReducer,
});

export default cRducer;

下面看看在组件中如何使用吧！

  const dispatch = useDispatch()
  const { playList } = useSelector(
    state => ({
      playList: state.getIn(['player', 'playList']),
    }),
    shallowEqual
  )

不再使用connect函数

redux-immutable 解决了redux中的state不可变性的问题,因为要保证state不可变性,在每次更新state之前都会将之前state进行一次拷贝,如果数据量大的话会非常小号性能 使用useSelector的缺点: 因为在useSelector的缺点在组件决定当前是否渲染之前会进行一次引用对比,每次函数调用之后都会进行一次重新渲染 解决useSelector的缺点: 使用shallowEqual进行优化,在组件决定是否被渲染之前,会进行一次浅层对比如果该组件依赖的state并没有被更改,就不会进行渲染