Redux的三大原则?实现思路?

简介: Redux的三大原则?实现思路?

三大原则

Store:在redux里面,只有一个store,整个应用需要管理的数据都在这个store里面。这个store我们不能直接去改变,我们只能通过返回一个新的store去更改。Redux提供了一个createStore来创建state。

Action:这个action指的是视图层发起的一个操作,告诉store我们需要改变。比如用户点击了按钮,我们就要去请求列表,列表的数据就会变更。

Reducer:在上面我们定义了一个Action,但是action不会主动发出变更操作到store,所以这里我们需要调用store的dispath方法,当dispath发起一个action之后,会到达reducer,那么这个renducer是用来干什么的?顾名思义,这个reducer就是用来计算新的store的,reducer接收两个参数(当前的state,接收到的action动作)然后他经过计算,会返回一个newstate状态。(前面我们已经说过了,不能直接更改,必须通过返回一个新的state来进行更改。)

这个renducer是一个纯函数。纯函数:就是一个函数的返回结果只依赖于它的参数,并且在执行过程中没有副作用,我们就把这个函数叫做纯函数。

React-redux实现思路?

在入口文件中,使用Provider组件包裹组件并注入store,在同一个的Provider标签中,store是可以共享的。在页面组件中,再使用connect将当前页面组件和派发的state和dispatch绑定,store中的state数据派发到props中,然后自定义的函数也同样派发到props上,这样就可以从props中获取到变量和方法了。

因为使用connect连接,当store发生变化的时候,对应的组件数据也会更新。

react-redux将业务逻辑写在自定义的派发函数中,将函数派发到props中,从props中获取state中的值和自定义的函数。thunk将部分异步处理业务逻辑写在action中,saga则是放在监控的函数中。)


相关文章
|
9月前
|
设计模式 存储 前端开发
React开发设计模式及原则概念问题之自定义Hooks的作用是什么,自定义Hooks设计时要遵循什么原则呢
React开发设计模式及原则概念问题之自定义Hooks的作用是什么,自定义Hooks设计时要遵循什么原则呢
|
9月前
|
存储 JavaScript 前端开发
Redux 遵循的三个原则
【8月更文挑战第30天】
102 2
|
9月前
|
设计模式 算法 开发者
设计模式问题之最小知识原则(迪米特法则)对代码设计有何影响,如何解决
设计模式问题之最小知识原则(迪米特法则)对代码设计有何影响,如何解决
|
9月前
|
设计模式 前端开发 JavaScript
React开发设计模式及原则概念问题之什么是设计模式,单一职责原则如何理解
React开发设计模式及原则概念问题之什么是设计模式,单一职责原则如何理解
|
12月前
|
设计模式 前端开发 API
写出易维护的代码|React开发的设计模式及原则
本文对React社区里出现过的一些设计模式进行了介绍,并讲解了他们遵循的设计原则。
|
12月前
|
存储 JavaScript
Redux三大原则
Redux三大原则
73 2
|
12月前
|
存储 JavaScript
使用 redux 有哪些原则?
使用 redux 有哪些原则?
77 0
|
设计模式 前端开发 Java
【Java设计模式 思想原则重构】设计思想、设计原则、重构总结
【Java设计模式 思想原则重构】设计思想、设计原则、重构总结
282 0
|
设计模式 测试技术 程序员
代码的简单设计五原则
代码的简单设计五原则
33131 1
|
JavaScript 算法 调度
不一样的叙述思路 | 一步一步带你了解 vue3 的内部队列
不一样的叙述思路 | 一步一步带你了解 vue3 的内部队列
247 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等