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则是放在监控的函数中。)


相关文章
|
3月前
|
设计模式 存储 前端开发
React开发设计模式及原则概念问题之自定义Hooks的作用是什么,自定义Hooks设计时要遵循什么原则呢
React开发设计模式及原则概念问题之自定义Hooks的作用是什么,自定义Hooks设计时要遵循什么原则呢
|
3月前
|
存储 JavaScript 前端开发
Redux 遵循的三个原则
【8月更文挑战第30天】
50 2
|
3月前
|
设计模式 前端开发 JavaScript
React开发设计模式及原则概念问题之什么是设计模式,单一职责原则如何理解
React开发设计模式及原则概念问题之什么是设计模式,单一职责原则如何理解
|
6月前
|
设计模式 前端开发 API
写出易维护的代码|React开发的设计模式及原则
本文对React社区里出现过的一些设计模式进行了介绍,并讲解了他们遵循的设计原则。
|
6月前
|
存储 JavaScript
Redux三大原则
Redux三大原则
43 2
|
JavaScript 前端开发 算法
Redux和Vuex的异同点,以及用到的相同的思想
Redux和Vuex的异同点,以及用到的相同的思想
|
6月前
|
前端开发 JavaScript
第十二章 引出React中的生命周期
第十二章 引出React中的生命周期
|
6月前
|
存储 JavaScript
使用 redux 有哪些原则?
使用 redux 有哪些原则?
43 0
|
前端开发 JavaScript 算法
解密二叉树:探索概念、类型与常见算法的奥秘(顺带说一下React中的reconcile)
二叉树作为程序的一种数据结构,应用广泛,比如React中的reconcile过程,Fiber树的调和过程。确实,在React中,Fiber树是通过child和sibling连接子节点和兄弟节点的方式来表示的,这与普通的二叉树有所不同。 在React中,reconcile过程是将虚拟DOM转化为实际DOM的过程。通过比较新旧两棵树的差异,React可以高效地更新实际DOM,而不是每次都完全重新渲染整个DOM树。这个过程中会涉及到对Fiber树的遍历和调整,确保更新只发生在需要更新的部分。 Fiber树作为一种数据结构,可以帮助React跟踪组件的状态和变化,以及进行调度和渲染。它使用链表的形
57 1
解密二叉树:探索概念、类型与常见算法的奥秘(顺带说一下React中的reconcile)
|
存储 前端开发
react 实现低耦合 拖拽项目的思路
react 实现低耦合 拖拽项目的思路
55 0