React model

有几个基本的属性：
namespace：model 的命名空间，只能用字符串。一个大型应用可能包含多个 model，通过namespace区分。
state：当前 model 状态的初始值，表示当前状态。
reducers：用于处理同步操作，可以修改 state，由 action 触发。reducer 是一个纯函数，它接受当前的 state 及一个 action 对象。action 对象里面可以包含数据体（payload）作为入参，需要返回一个新的 state。
effects：用于处理异步操作（例如：与服务端交互）和业务逻辑，也是由 action 触发。但是，它不可以修改 state，要通过触发 action 调用 reducer 实现对 state 的间接操作。
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);

action：是 reducers 及 effects 的触发器，一般是一个对象，形如{ type: ‘add’, payload: todo }，通过 type 属性可以匹配到具体某个 reducer 或者 effect，payload 属性则是数据体，用于传送给 reducer 或 effect。
例子

import { Effect, Reducer } from 'umi';

import { CardListItemDataType } from './data.d';
import { queryFakeList } from './service';

export interface StateType {list: CardListItemDataType[];
}

export interface ModelType {namespace: string;state: StateType;effects: {fetch: Effect;
};reducers: {queryList: Reducer<StateType>;
};
}

const Model: ModelType = {namespace: 'listAndcardList',
state: {list: [],
},
effects: {*fetch({ payload }, { call, put }) {const response = yield call(queryFakeList, payload);yield put({type: 'queryList',payload: Array.isArray(response) ? response : [],});},
},
reducers: {queryList(state, action) {return {...state,list: action.payload,};},
},
};

export default Model;

React model相关推荐

antd + react model自定义footer_使用ESLint+Prettier规范React+Typescript项目
项目开发过程中,大多数时候我们使用别人搭建好的脚手架编写代码,是项目的参与者.对于一些细节往往被忽略了.其中代码检测本身是一类非常简单的配置,但涉及不同框架和语言组合使用的时候,可能比想象中要困难,本 ...
antd + react model自定义footer_更骚的create-react-app开发环境配置craco
背景使用 CRA 脚手架创建的项目,如果想要修改编译配置,通常可能会选择 npm run eject 弹出配置后魔改.但是,eject 是不可逆操作,弹出配置后,你将无法跟随官方的脚步去升级项目的 ...
Backbone React Requirejs 应用实战(一)——RequireJS管理React依赖
试着用React替换Mustache打造了一个简单的页面,http://backbone-react.phodal.com/,当然Router用的还是Backbone的Router(react-rou ...
结合vue、react、angular谈谈MVC、MVP、MVVM框架
首先,在谈这个话题之前, 我们有必要了解一下库和框架的区别. 我们先来看react官网以及vue官网对他们的定位: react: vue: react我们不说了,官网上明明白白说了,人家是一个libr ...
【转】React Vue MVC MVVM MVP
首先,在谈这个话题之前, 我们有必要了解一下库和框架的区别. 我们先来看react官网以及vue官网对他们的定位: react: vue: react我们不说了,官网上明明白白说了,人家是一个libr ...
vue笔记1 渐进式、 MVVM 框架
参考理解MVVM在react.vue中的使用结合vue.react.angular谈谈MVC.MVP.MVVM框架 Vue(MVVM).React(MVVM).Angular(MVC)对比 vue ...
http://www.115ps.com/all.html,Tynamo
Two years ago I read a blog post about some guy writing a Tetris webapp with Clojure in two hours an ...
React最佳实践系列 —— 循序渐进理解 Dva中的model概念
Dva最佳实践 -- 循序渐进理解 Dva中的model概念一. 序二. 在create-react-app中使用redux 1. 开始 2. 安装redux 三.异步action 四. Dva中 ...
antd react dva在model中使用另一个model的state值
const oldData = yield select(({ baseDictionary }) => {return ([...customPageSetting.list,]) });

React model

React model

React model相关推荐

最新文章

热门文章