React+Dva

最新推荐文章于 2025-05-20 14:33:30 发布

转载最新推荐文章于 2025-05-20 14:33:30 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/JunneHu/p/7553124.html

文章标签：

#javascript #json #ViewUI

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

<Route path="/" component={App}>
  <Route path="statements" component={Statements}/>
</Route>

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