dva简单使用(不涉及原理)

dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架

官方文档

定义 Model

dva 通过 model 的概念把一个领域的模型管理起来,包含同步更新 statereducers,处理异步逻辑的 effects,订阅数据源的 subscriptions

创建Model

export default {
  namespace: 'products',
  state: [],
  reducers: {
    'delete'(state, { payload: id }) {
      return state.filter(item => item.id !== id);
    },
  },
};
  • namespace: 表示在全局state上的key
  • state: 初始值,这里设置为空数组
  • reducers: 等同于 redux 里的 reducer,接收 action,同步更新 state

简单使用,官方简单示例
示例链接

// 摘抄代码
app.model({
  namespace: 'count',
  state: 0,
  reducers: {
    add  (count) { return count + 1 },
    minus(count) { return count - 1 },
  },
});


const App = connect(({ count }) => ({
  count
}))(function(props) {
  return (
    

{ props.count }

); });

你可能感兴趣的:(dva简单使用(不涉及原理))