dva的基本用法

Posted 2020-12-31 mengff

dva是一个状态管理工具，整合了redux，redux-saga，react-router,fetch等框架，目前只能用于react的状态管理

1. dva的models

dva的主要作用还是整合了redux，redux-saga的多文件的分散的写法，将state,reducers,effects这些常用的状态
处理方法集中在一个model中，其形式如下：

import * as userService from ‘../services/userService‘

export default {
  namespace: "users",
  state: {
    list:[]
  },
  reducers: {        
    save(state, {payload:{data}}) {   
      state.list = data;
      return {...state}
    },
    removeItem(state, {item}) {
      state.list = state.list.filter(function (lItem) {
        return item.id !== lItem.id
      });
      return{...state}
    }
  },
  //effects指的是涉及到异步请求的方法。通常用来调用服务获取数据。
  //这里要注意如果effects的方法名与reducers中存在重复的话容易造成死循环。
  effects: {          
    * fetch(payload,{put, call}) {
      const data = yield call(userService.fatchData);
      yield put({type: "save", payload: data})
    },
    * fetchRemoveItem({item},{put,call}){
      const result = yield call(userService.fetchRemoveItem,item.id);
      if (result){
        console.log(true);
        yield put({type:"removeItem",item})
      }else{
        console.log(false);
      }
    }
  },
  subscriptions: {              
    setup({dispatch}) {
      dispatch({type: ‘fetch‘})
    }
  }
}

要在全局的app中注册model

app.model(require(‘./models/users‘).default);

2. dva的models的几点说明

namespace:       全局状态的属性，通过global.namespace来访问对应model的state
reducers:           同步修改状态的方法
effects:             异步修改状态的方法，effects中使用的还是generator，与redux-saga中的调用完全一致，
　　　　　　　　不能直接调用reducers中的同步方法，通过put({‘reducer方法名‘,payload})的形式来
　　　　　　　　调用reducer中的方法

subscriptions:    subscription 是订阅，用于订阅一个数据源，然后根据需要 dispatch 相应的 action。
　　　　　　　   在 app.start() 时被执行，数据源可以是当前的时间、服务器的websocket 连接、
　　　　　　　   keyboard 输入、geolocation 变化、history 路由变化等等

这个结构与vuex的结构十分类似

state -> reducers -> effects 对应 state -> mutations -> actions

3. dva中的状态传递

依然采用react-redux的方法，用connect,mapStateToProps来解决

4. dva中的全局事件

dva中提供了一下全局的事件，来解决注册和拦截问题

const app = dva({
  history,
  initialState,
  onError,
  onAction,
  onStateChange,
  onReducer,
  onEffect,
  onHmr,
  extraReducers,
  extraEnhancers,
});

onError: 　　　　     effect 执行错误或 subscription 通过 done 主动抛错时触发，可用于管理全局出错状态
onAction: 　　　　   在 action 被 dispatch 时触发，用于注册 redux 中间件
onStateChange: 　   state 改变时触发，可用于同步 state 到 localStorage，服务器端等
onReducer:             封装 reducer 执行，全局拦截reducer
onEffect:                 封装 effect 执行，全局拦截effect
onHmr:                   全局处理热替换
extraReducers:        指定额外的 reducer
extraEnhancers:      指定额外的 StoreEnhancer

 

 

参考：http://www.cnblogs.com/axel10/archive/2018/03/12/8548305.html