DvaJS的Effect使用介绍

很多朋友使用dvajs不知道这个Effect是用来干嘛的，今天我们就一起来使用一下：

示例：

app.model({namespace: 'todos',effects: {*addRemote({ payload: todo }, { put, call }) {yield call(addTodo, todo);yield put({ type: 'add', payload: todo });},},
});

小重点来了，请认真看~

Effects

put
用于触发action

yield put({ type: 'todos/add', payload: 'Learn Dva'});

call
用于调用异步逻辑，支持Promise。

const result = yield call(fetch, '/todos');

这个call与JS的call用法大概一致，这个call的第一个参数是你要调用的函数，第二个参数开始是你要传递的参数，可一一传递。

select
用于从state里获取数据。

const todos = yield select(state => state.todos);

牢记以上三个小东东，你就掌握了effect的精髓了~

拓展：

错误处理

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

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

然后effects里的抛错和reject的promise就都会被捕获到了。

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

关于JS的try catch的详细用法请看：JavaScript中try{}catch{}finally的使用

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

接下来我们尝试将异步请求加入中间件，当返回错误时，我们统一到onError hook里进行处理。

异步请求基于 whatwg-fetch，API 详见：https://github.com/github/fetch

GET 和 POST

import request from '../utils/request';// GET
request('/api/todos');// POST
request('/api/todos', {method: 'POST',body: JSON.stringify({ a: 1 }),
});

统一错误处理
假如我们与后端约定当请求出现错误时返回以下格式：

{status: 'error',message: '',
}

那么我们就编辑utils/request.js，加入以下中间件：

function parseErrorMessage({ data }) {const { status, message } = data;if (status === 'error') {throw new Error(message);}return { data };
}

这样我们就完成了错误的统一处理~