Reducer
reducer 是一个函数,接受 state 和 action,返回老的或新的 state 。即:(state, action) => state
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');
select:用于从 state 里获取数据。 const todos = yield select(state => state.todos);
错误处理
全局错误处理
dva 里,effects 和 subscriptions 的抛错全部会走 onError
hook,所以可以在 onError
里统一处理错误。
const app = dva({ onError(e, dispatch) { console.log(e.message); }, })
本地错误处理
如果需要对某些 effects 的错误进行特殊处理,需要在 effect 内部加 try catch
异步请求
GET 和 POST
import request from '../util/request'; // GET request('/api/todos'); // POST request('/api/todos', { method: 'POST', body: JSON.stringify({ a: 1 }), });
Subscription
subscriptions
是订阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。
subscriptions: { setup({ dispatch, history }) { history.listen(({ pathname }) => { if (pathname === '/users') { dispatch({ type: 'users/fetch', }); } }); }, },
Router
基于 action 进行页面跳转
import { routerRedux } from 'dva/router'; // Inside Effects yield put(routerRedux.push('/logout')); // Outside Effects dispatch(routerRedux.push('/logout')); // With query routerRedux.push({ pathname: '/logout', query: { page: 2, }, });