前言:
redux在工程中普遍使用,套用模板可以快速上手,但底层逻辑细节不清楚,无法灵活变通使用,也不方便排查,因此从平台系统学习,记录笔记(先翻译后完善理解)。
API概述
React Redux 是react官方认定的UI绑定库,它的作用:支持react的组件从react store中取数据,支持下发(dispatch翻译成"执行")actions到store中更新数据state。 (PS.需要补充的知识:store、actions)
API: Provider
<Provider />组件提供Redux核心能力之一:从react store中取数据,使得app其它场景可以使用store数据
API: HOOKS
Redux提供两个自定义的hooks,借助这两个hooks,组件和store可以相互作用。 (PS.hooks的知识补充)
useSelector 从store中读数据state,同时订阅store中数据state的更新。 store提供了actions(?)方法和dispatch方法,用于更新state, Redux中的useDispatch 将store中的disaptch取出,用来执行actions更新数据。
//取数据
const count = useSelector(selectCount)
//取dispatch,
const dispatch = useDispatch()
onClick={() => dispatch(increment())}
补充知识
Redux本身是一个独立的库,可以用于任务UI框架,例如React、Angular、Vue, Ember 和 vanilla JS。另外不得不注意,React、Reudx、React Redux是三个不同的库,前两者更是完全独立的两个库。
无论在任务UI框架中使用Redux,都需要使用一个UI binding库将Redux与UI框架绑定,而不能直接在UI代码中跟store交互。React Redux就是React官方认定的UI binding库。
任何UI层中使用Redux都需要特定的操作,可参考这里: UI binding库例如React Redux处理store的内部交互逻辑,如果仅仅使用不需要用户关注内部逻辑。如果想深度学习React Redux的内部逻辑及更灵活使用,可以参考这里 Idiomatic Redux: The History and Implementation of React Redux.