React+Dva
阅读原文时间:2023年07月11日阅读:2

  reducer 是一个函数,接受 state 和 action,返回老的或新的 state 。即:(state, action) => state

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 }),
  });

  subscriptions 是订阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。

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

基于 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,
},
});