Redux教程todo示例的个人解读

最近在学习Redux,今天刚把Redux基础看完,教程提供了一个todo的简单示例,麻雀虽小,五脏俱全。

把示例确确实实地看懂之后,明显地加深了我对Redux的理解。

Redux分三大部分:action,reducer,store。核心思想是store保存全局state且唯一,而修改state的唯一方式是触发(dispatch)action,此时reducer接收action和旧的state并返回一个新的state,此时与redux连接(connect)上的组件就会收到新的state,更新自身。而store则通过createStore(reducer)生成。

然后其中还有一个核心便是:容器组件与展示组件相分离的思想。从我个人的理解来说,就是展示组件是纯函数,仅通过接收props来更新输出,因此展示组件完全可以脱离Redux使用;而容器组件才是负责逻辑控制的抽象,通过容器组件与Redux进行连接和响应,进而改变下属的展示组件,因此容器组件起的是一个承上启下的作用。

在React开发中,通常会使用React-Redux,该库提供的connect函数就是连接Redux与展示组件的高阶函数,该函数会调用2次。第1次调用该函数,就可以生成一个连接到Redux的高阶组件;第2次调用,往这个高阶组件传入对应的展示组件,就可以得到想要的容器组件了。

因此,我觉得在实际开发过程中,至少这3块需要做比较多的工作:action,reducer,container。对应:触发->数据更新->视图更新。

最大的收获就是,一定要静下来去思考去看,这样思维就会很清晰,理解起来会很快。

https://www.redux.org.cn/docs/basics/UsageWithReact.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注