Redux实现流程

好多人对Redux 实现流程都感觉很痛苦 今天我们来简单的了解一下吧

首先来看看思路图吧!

http://www.ruanyifeng.com/blogimg/asset/2016/bg2016091802.jpg

看到这里估计会有很多人都看不明白 尤其是一些刚学习redux 的一些朋友

其实万事开头难,你要找到切入点 有了切入点你就成功了50%

让我们来先了解一下redux实现原理吧 

  redux 原理

1. 组件视图 通过 事件 发送 dispatch action  

2. store 接收到 action , 把action和 oldState 当做参数发送给 reducers

3. reducers 接收 action和 oldState  通过计算返回新的 newState 给 store 

4. store 会把 state 重新的渲染到 组件内视图  

如果看到这里你还不明白

来吧!!

咱们继续

先了解一下每个api的作用

 Store  中间基站  负责调配  (getState  dispatch   subscribe )

Store 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store

Redux 提供createStore这个函数,用来生成 Store


 

 state 组件的状态 对象 

Store对象包含所有数据。如果想得到某个时点的数据,就要对 Store 生成快照。这种时点的数据集合,就叫做 State

 

数据===> store  ===> store.getState()  ===> state 

 

State 对应一个 View。只要 State 相同,View 就相同。你知道 State,就知道 View 是什么样

 

state 和 view 是一一对应的

 

 action    store 发出的通知 提示我要改变 state state 就会去修改视图 view 

Action 就是 View 发出的通知,表示 State 应该要发生变化了

Action 是一个对象。其中的type属性是必须的 payload 载荷 参数

 

const action = {type:"ChangeMsg" ,payload }

 

 Action Creator  action 升级写法  用函数来书写action 

 

()=>({type:"ChangeMsg" ,payload })  

 

function addSome(){

    return {

        type:"addSome"

    }

}

 

 store.dispatch()是 View 发出 Action 的唯一方法。 


 reducer    类似 mutation 纯函数 只负责计算修改 state 

Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State

 

 

终结: 在平时项目中也可实现redux 的作用

你可以按照以下步骤完成

先 写 action 

再 写 reducer 

最后去 发送 action 

完成  done 

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Redux的工作流程可以简单地描述为以下几个步骤: 1. 定义状态(State):首先,我们需要定义应用程序的状态对象。这个状态对象通常是一个JavaScript对象,可以包含应用程序中所有需要共享和管理的数据。 2. 触发行为(Action):当用户在应用程序中执行某个操作时,比如点击按钮或者提交表单,我们会创建一个对应的行为对象。行为对象是一个包含`type`属性的纯JavaScript对象,用于描述所执行的操作。 3. 更新状态(Reducer):Reducer 是一个纯函数,它接收当前的状态和行为对象作为参数,并根据行为的类型来更新状态。它会返回一个新的状态对象,而不是修改原来的状态。Reducer 的作用是保证状态的不可变性和可预测性。 4. 存储状态(Store):在 Redux 中,我们通过创建一个存储对象来存储应用程序的状态。这个存储对象是由 Redux 提供的 createStore 函数创建的,它接收一个 reducer 和可选的初始状态作为参数。 5. 分发行为(Dispatch):要改变应用程序的状态,我们需要调用 store 的 dispatch 方法,并传入一个行动对象。Redux 会将该行动对象传递给 reducer,并根据 reducer 返回的新状态来更新存储中的状态。 6. 订阅状态(Subscribe):我们可以通过调用 store 的 subscribe 方法来订阅状态的变化。这样,每当状态发生变化时,我们可以执行相应的操作,比如更新用户界面。 总结来说,Redux 的工作流程是通过定义状态、触发行动、更新状态来管理应用程序的数据流和状态变化。通过 Redux 的严格规则和纯函数的设计,可以实现可预测、可调试和可扩展的应用程序状态管理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值