看过我之前分享的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],
});
最后
这段时间一直在偷懒,好久没写博客了,希望有帮助到的小伙伴可以给我点个赞,让我有动力写下去,谢谢大可爱(●’◡’●)。