Redux的运作流程

时间:2021-7-21 作者:qvyue
  1. 首先,由用户触发视图产生一个动作事件,视图发出动作事件需要调用 dispatch()方法
store.dispatch(action)
  1. store会自动调用Reducer,并且向Reducer传入两个参数:state和action.
  2. 同时,Reducer会返回一个新的状态给Store。
let nextState = reducer(state,action);
  1. 状态一旦发生变化,Store就会调用监听函数,并通过Store的getState()方法获取当前状态,并最终触发视图的重新渲染
store.subscribe(listener);
function listener(){
        let newState = store.getState();
        component.setState(newState);
    }
补充

当Store接收到动作以后,必须返回一个新的状态才能触发视图的变化,状态计算的过程即被称为Reducer
Reducer本质上是一个函数,它接收动作和当前状态作为参数,并返回一个新的状态。

  const reducer = function(state,action){
    //...
    return new_state;
};

结尾

今天的分享先到这里了,后续会分享关于redux相关实例,欢迎点赞,加关注了,如下其他问题,欢迎留言喽~祝君好运!!

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。