useSelector、useDispatch、useStore优化useContext替换redux

看过我之前分享的useReducer、与useContext替换redux功能文章的小伙伴们，今天给你们推荐更好用的hook方法，首先我们需要明白redux与hook不冲突，之所以使用hook是为了react这类ui框架更好兼容与业务场景的需求等因素。

废话不多说，进入正题，学会这个hook方法前你需要有一点redux基础知识，才能更好理解。

使用大前提，在全局app文件使用顶层组件传入store

全局定义与传入

import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk"; // 可以实现异步通信

 //创建Store
  const Store = createStore(
    rootReducer,
    composeWithDevTools(applyMiddleware(thunk))
  );

 <Provider store={Store}>
      <Component {...pageProps} />
    </Provider>

组件内引用

import { connect, useSelector, useDispatch, useStore } from "react-redux";

获取state值----useStore

• redux常用的getState()、dispatch(action)、subscribe(listener)、replaceReducer(nextReducer)等API都可以获取到

const Store = useStore();

Store.getState().NormalReducer.toast;

// 获取state值

获取state值----useSelector

• 与useStore最大区别：未来的state变化useSelector可以异步监听到变化触发重新渲染，而useStore只能获取即时即刻的state值。

const NormalReducer = useSelector((state) => state.NormalReducer);

NormalReducer.toast

触发dispatch----useDispatch

const dispatch=useDispatch();

dispatch({
      type: DEVICE,
      value: deviceArr[idx],
    });

最后

这段时间一直在偷懒，好久没写博客了，希望有帮助到的小伙伴可以给我点个赞，让我有动力写下去，谢谢大可爱(●’◡’●)。