redux和dva

2021/7/21 6:10:05

本文主要是介绍redux和dva,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

实习的时候,公司使用的是react,react说实话生态学的还不是很完善,就暂时先不做跟react相关的博客,等以后学好了react全家桶之后,专门再总结一下react的内容

这两天看了公司的alita和dva,具体项目还没上手,但是对dva很感兴趣,一方面因为dva名字的由来,另一方面刚好在看redux的内容。

在讲redux的时候,不得不把vuex拿出来讲讲,说实话,vuex很久之前学的了,vue是我前端框架第一次接触的,vue的方便性也让我很喜爱,但是身为一个前端攻城狮怎么能不学其他框架呢,趁着在公司实习的日子里,把react的学习提上日程

扯远了,回到redux和vuex中。redux是一个状态数据的管理库,它可以用在react,也可以用在vue中,但是vue自己有一个vuex,兼容性更好,所以更大多数redux用在react的项目中。

学习vuex的时候,与现在的redux做对比,很清晰能比较出来,vuex比redux简单

下图是vuex的工作流程原理

 

 

 

VueX是数据管理框架,在之前我们vue里面的数据是data,父子组件,provide等等传递 在vue工程里面,数据就不是组件级别的创建,而是页面级别的创建了

 

 

 VueX创建了全局的仓库,在vuex的state中,存放在全局的数据。我们使用vuex提供的store对象的state属性,来获取全局的数据

export default{
  name:'Home',
  computed:{
    myName(){
      return this.$store.state.name;
    }
  }
}

我们如何修改全局的数据?Vuex不允许我们直接修改全局的数据

因此我们要 调用$store里面一个方法叫做dispatch,他去派发一个action,这个action的名字叫做change 在createStore里就有一个action接收派发而来的change,执行这个change方法。在这个方法中提交一个commit触发一个mutation,在mutations里面接收触发而来方法并执行,在该方法中我们就可以修改数据

vuex的工作流程就是,组件之间使用dispatch去派发一个action,vuex中主要有三个属性action,commit,state用来操作管理数据。

actions感知到组件所派发的action,执行action对应参数的方法,提交一个commit去触发mutation,mutation中执行收到的commit的参数方法。从而修改state数据,而这个state数据就是全局的数据仓库

 

 

 在最近的学习中,我接触到了redux,说实话,redux复杂程度高于vuex。

react整个应用中会存在很多个组件,每个组件的state是由自身进行管理,包括组件定义自身的state、组件之间的通信通过props传递、使用Context实现数据共享

将所有的状态进行集中管理,当需要更新状态的时候,仅需要对这个管理集中处理,而不用去关心状态是如何分发到每一个组件内部的

redux就是一个实现上述集中管理的容器,遵循三大基本原则:

  • 单一数据源
  • state 是只读的
  • 使用纯函数来执行修改

redux要求我们把数据都放在 store公共存储空间

一个组件改变了 store 里的数据内容,其他组件就能感知到 store的变化,再来取数据,从而间接的实现了这些数据传递的功能

 

 

 React Components (组件)需要获取一些数据, 然后它就告知 Store 需要获取数据,这就是 Action Creactor , Store 接收到之后去 Reducer 查一下, Reducer 会告诉 Store 应该给这个组件什么数据

如何使用?

创建一个store

import { createStore } from 'redux' // 引入redux 
const store = createStore() // 创建数据的公共存储区域

还需要创建一个记录本去辅助管理数据,也就是reduecer,本质就是一个函数,接收两个参数state,action,返回state

// 设置默认值 
const initialState = { 
  counter: 0 
} 
 
const reducer = (state = initialState, action) => { 
} 

将记录本传递给store,两者建立连接,获取store里面的数据,则通过store.getState()来获取当前state

const store = createStore(reducer) 
store.getState()

那么如何更改store中的数据呢?

是通过dispatch来派发action,通常action中都会有type属性,还有传入的更改数据。

type属性代表这个action所要做的操作

store.dispatch({ 
  type: "ADD_NUMBER", 
  number: 5 
}) 

ruducer中处理所要进行操作,使用swich去接收不同action所代表的操作方法

const reducer = (state = initialState, action) => { 
  switch (action.type) { 
    case "INCREMENT": 
      return {...state, counter: state.counter + 1}; 
    case "DECREMENT": 
      return {...state, counter: state.counter - 1}; 
    case "ADD_NUMBER": 
      return {...state, counter: state.counter + action.number} 
    default:  
      return state; 
  } 
} 

注意,reducer是一个纯函数,不需要直接修改state

这样派发action之后,既可以通过store.subscribe监听store的变化,如下:

store.subscribe(() => { 
  console.log(store.getState()); 
}) 

小结

  • createStore可以帮助创建 store
  • store.dispatch 帮助派发 action , action 会传递给 store
  • store.getState 这个方法可以帮助获取 store 里边所有的数据内容
  • store.subscrible 方法订阅 store 的改变,只要 store 发生改变, store.subscrible 这个函数接收的这个回调函数就会被执行

在React项目中,会搭配react-redux进行使用

何为react-redux?

如下图

 

 

在react-redux中,我们将UI组件去除掉redux的操作,将redux的操作全部放在容器组件身上

容器组件向redux进行数据获取和更改,通过props将数据传递给UI组件,UI组件也通过props告知容器组件要对redux中的数据进行何样的操作

容器组件用以专门向reduxi请求修改状态,存在containers文件夹里面

UI组件无法向redux去修改,存在component文件夹里面

connet是一个函数,这个函数调用的返回值依旧是一个函数 ,返回值的函数让容器组件与UI组件进行关联,从而通过props进行组件间的通信。

const CountContainer=connect()(CountUI)

connect在第一次调用的时候要传入两个参数,传入的两个参数必须是函数 一个是redux中所保存的状态,另一个就是操作状态的方法。简写如下

function a(){
    return {n:900}
}

function b(){
    return {jia:(num)=>{dispatch({
  type: "ADD_NUMBER", 
  number: 5
})}}
}

export default connect(a,b)(CountUI)

a函数返回的对象key作为UI组件的props的key,value作为UI组件的props的value,以供UI组件接收到state

b函数返回的对象实际上向redux派生一个action,告知redux对state中的数据进行何种操作

容器组件的两个方法:mapStateToProps和mapDispatchToProps.

这是官方给的名称,为了好理解上面的代码使用a,b简述。实际使用以官方文档为主

export default connect(mapStateToProps,mapDispatchToProps)(CountUI)

回到今天所学习到的新框架——dva

dva 好像就是redux的一些轻量级应用整合,简化了API,让开发更方便,但果然这是我自己的理解。

核心概念

  • State:一个对象,保存整个应用状态
  • View:React 组件构成的视图层
  • Action:一个对象,描述事件
  • connect 方法:一个函数,绑定 State 到 View
  • dispatch 方法:一个函数,发送 Action 到 State

不难发现,其本质和redux一样,只不过dva让redux的操作更加的方便简洁,提高了我们的开发效率。

Action 是用来描述 UI 层事件的一个对象。

connect 方法返回的也是一个 React 组件,也是称为容器组件。因为它是原始 UI 组件的容器,即在外面包了一层 State。

connect 方法传入的第一个参数是 mapStateToProps 函数,mapStateToProps 函数会返回一个对象,用于建立 State 到 Props 的映射关系。

dispatch 是一个函数方法,用来将 Action 发送给 State。

dispatch 方法从哪里来?被 connect 的 Component 会自动在 props 中拥有 dispatch 方法。

其实dva内容和react-redux是一样的原理,只不过为了开发速度,dva封装的API使得操作redux更为便捷

dva中有model对象,这个对象是我第一次遇到的,在这个对象中,封装这对redux中的各种操作

model最简结构

export default {
  namespace: 'count',
  state: 0,
  reducers: {
    add(state) {
      return state + 1;
    },
  },
  effects: {
    *addAfter1Second(action, { call, put }) {
      yield call(delay, 1000);
      yield put({ type: 'add' });
    },
  },
};

Model 对象的属性

  • namespace: 当前 Model 的名称。整个应用的 State,由多个小的 Model 的 State 以 namespace 为 key 合成
  • state: 该 Model 当前的状态。数据保存在这里,直接决定了视图层的输出
  • reducers: Action 处理器,处理同步动作,用来算出最新的 State
  • effects:Action 处理器,处理异步动作

Reducer

Reducer 是 Action 处理器,用来处理同步操作,可以看做是 state 的计算器。它的作用是根据 Action,从上一个 State 算出当前 State。

Effect

Action 处理器,处理异步动作,基于 Redux-saga 实现。Effect 指的是副作用。根据函数式编程,计算以外的操作都属于 Effect,典型的就是 I/O 操作、数据库读写。

Generator 函数

Effect 是一个 Generator 函数,内部使用 yield 关键字,标识每一步的操作(不管是异步或同步)。

call 和 put

dva 提供多个 effect 函数内部的处理函数,比较常用的是 call 和 put

    • call:执行异步函数
    • put:发出一个 Action,类似于 dispatch

我们约定当 src/models 下存在 dva 的 models 文件时,会被自动加载到项目中。 即约定了存在即生效,因此我们约定仅在这个文件夹下存放 dva 的 models 文件,虽然存放其他的文件会被框架自动过滤忽略,但是在这个目录存放其他文件会增加理解的心智负担,建议不要存放无关的文件。且为了管理方便,一般将文件名和 models 的 namespace 一一对应,不仅可以直观的找到相应的 models ,而且能够保证不会存在 models 冲突的问题,因为文件系统本身就不允许同名文件。

时间不早,先休息,后面将会针对dva操作redux的具体进行总结,在这个总结中我们可以很直白的看出dva与redux操作上的简易程度

宣传下自己的网站mishi-blog.com

尚在襁褓中的一个网站。



这篇关于redux和dva的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程