redux流程图:
把redux比作一个图书馆,把这个流程比作结束的流程。
react components:react components是一个借书的人。
action creator:一般去图书馆借书都会和管理员说,我要接什么什么书,那么这里的action creator就是你说的我要借什么什么书这句话。
store:store就是这个图书馆的管理员。
reducers:一般来说图书馆管理员都会有一个本子记录什么什么书,当你去借这本书的时候,管理员就会去查一下,图书馆里还有没有这本书,还书的时候要查一下,这个书应该放回那个位置,那么这里的reducers就是管理员用来记录图书的这本本子。
图书馆借书:
首先呢,我们去图书馆说了我要接什么什么书,那么这句话就被图书馆管理员听到了,管理员就去查询一下我是不是有这本书,然后把这本书给借书者,这就是整个流程。
代码中:
获取数据:react components和store说我要获取(action),store知道你要获取或改变数据,但是要去查有没有这个数据,他要去问reducer,reducer告诉store有这个数据,然后把数据给react components
更改数据:react components和store说action(我要改变数据),store知道你要改变数据,但是不知道怎么帮助改变数据,他要去问reducer,reducer告诉store你要怎么改变数据,store在告诉react components我的数据改完了,你可以来获取了,就可以获取到最新的数据。
redux设计和使用的三大原则
1.store是唯一的
2.只有store能改变自己的内容
3.reducer必须是纯函数(给定固定的输入就一定会有固定的输出,而且不会有副作用,不能有异步操作,不是有时间改变操作)
在reducer中不允许修改state,重新深度拷贝一个state后生成一个新的state,然后对新的state进行修改
redux中的核心api
1.createrStore //创建store
2.store.dispatch //提交action
3.store.getState() //获取到store的数据
4.store.subscribe //监听store中数据的变化
最后欢迎关注我的公众号,在这里我们聊的不止代码,还有人生,另外我还放置可平时个人觉得比较有用的一切前端资料在公众号,欢迎共享!