dva Reducers与Effects的使用介绍

介绍

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

定义model

dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。

Reducers

在 model 文件夹下新建products.js文件

export default {namespace:"products",state:[],reducers:{'delete'(state,{payload:id}){let _state=JSON.parse(JSON.Stringfy(state))return _state.filter(item=>item.id!==id)},'add'(state){console.log("state",state);return [...state,{name:"umi",id:3}]}},
}

namespace model 的命名空间，同时也是他在全局 state 上的属性，只能用字符串，不支持通过 . 的方式创建多层命名空间。
state 是初始值，优先级低于传给 dva() 的 opts.initialState（index.js文件中定义）。
reducers 用于处理同步操作，唯一可以修改 state 的地方。由 action 触发。格式为 (state, action) => newState 或 [(state, action) => newState, enhancer]。

使用

直接通过dispatch进行提交，参数包括type，payload（payload指传递的数据，可省略）

const handleDelete=(id)=>{dispatch({type: 'products/delete',payload: id,});
}const addData=()=>{dispatch({type: 'products/add',});}

effects

以 key/value 格式定义 effect。用于处理异步操作和业务逻辑，不直接修改 state。由 action 触发，可以触发 action，可以和服务器交互，可以获取全局 state 的数据等等。
格式为 (action, effects) => void 或 [(action, effects) => void, { type }]。

新建一个一个model/user.js

import  {getList} from "../api/index"
export default {namespace:"user",state:[],reducers:{},effects:{*getList(payload,{call,put}){//payload可写成{payload}，还可以调用回调，{payload,callback}这种方式使用是非常不优美的，可以改成dataCallBack这种方式const { resolve } = payload;const data= yield  call(getList, '/user');//异步请求接口 (getList指请求数据的接口)yield put({ type: 'products/add'});  //调用reducer!!resolve && resolve(data);yield put({ type: 'products/add'});  //调用reducer     }}
}

api/index.js文件

export const getList= ()=>{return new Promise((resolve,reject)=>{  fetch("./data.json",{method:"get"}).then(res =>{return  res.json()}).then((result) => {console.log("result",result.list)resolve(result.list) },(error) => {reject(error)console.log(error)})})
}


const dataCallBack=()=>{return new Promise((resolve)=>{dispatch({type: 'user/getList',payload:{resolve}})}).then((res)=>{console.log("Data",res)})
}

页面调用

const getData=()=>{dispatch({type: 'user/getList',payload:"ceshi"});
}

select

用于从 state 里获取数据。

state:{user:"ssss"},
const users = yield select(state => state.user);

错误处理

全局错误处理

 dva 里，effects 和 subscriptions 的抛错全部会走 onError hook，所以可以在 onError 里统一处理错误。

const app = dva({onError(e, dispatch) {console.log(e.message);},
});

本地错误处理

如果需要对某些 effects 的错误进行特殊处理，需要在 effect 内部加 try catch 。

app.model({effects: {*addRemote() {try {// Your Code Here} catch(e) {console.log(e.message);}},},
});

Subscription

subscriptions 是订阅，用于订阅一个数据源，然后根据需要 dispatch 相应的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。格式为 ({ dispatch, history }) => unsubscribe 。

app.model({subscriptions: {setup({ dispatch, history }) {history.listen(({ pathname }) => {if (pathname === '/users') {dispatch({type: 'users/fetch',});}});},},
});

dva Reducers与Effects的使用介绍相关推荐

Dva中在effects中获取state的值
Dva中在effects中获取state的值首先,看官网给出effects中的例子 effects详情见 it('put multi effects in order', done => {c ...
dva学习-入门安装和目录介绍
一.dva安装和介绍下面的npm其实可以用淘宝镜像cnpm安装更快,安装命令npm install -g cnpm --registry=https://registry.npm.taobao.or ...
在dva中的effects实现callback
在前端实现修改用户密码的功能,通过dispatch来实现与后端api接口的交互. 界面点击"提交"执行的代码如下: handleSubmit = () => {const { ...
聊聊 effects 与 reducers--React AntDesign Dva
原文:https://www.yuque.com/yuxuanbeishui/zog1rm/tgmgws 今天我们就来聊聊 dva 中的 effects 与 reducers以及其中涉及的关键字的使用 ...
dva源码解析（一）
转载 :原文 https://blog.csdn.net/zp1996323/article/details/73315096 写在前面 dva是蚂蚁金服推出的一个单页应用框架,对redux,reac ...
dva的简单使用（一）
一.前言在实际的前端开发中,像 cardList 中包含的那些数据,一般都是通过发起异步 http 请求从后端服务中获得. 我们希望把数据逻辑(cardList 相关逻辑)和视图逻辑(PuzzleC ...
总结对Dva数据流向的简单理解
在刚刚接触Dva时,我最想知道的第一个问题就是: 1. Dva是什么? Dva官网文档的介绍是: dva 是体验技术部开发的 React 应用框架,将上面三个 React 工具库包装在一起,简化了 A ...
dva的用法_dva.js 用法详解：列表展示
这次主要通过在线获取用户数据并且渲染成列表这个案例来演示dva.js. 整个开发流程概括下来应该是: 编写用户列表model(数据模型)-> 编写修改model的方法 -> 编写服务接口 ...
dva 中的响应编程
思维盲区我最开始学习使用 dva 是从<12 步 30 分钟,完成用户管理的 CURD 应用>开始的,这同时也是 dva 的官方教程.然而因为领悟能力太差,最开始完全没理解.前 4 步还 ...