您当前的位置: 首页 > 

wespten

暂无认证

  • 0浏览

    0关注

    899博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

Dva入门学习

wespten 发布时间:2020-05-06 18:39:53 ,浏览量:0

Dva入门学习

(划分结构&)

划分结构&

(设计Model&)

设计Model&

数据维度抽离,抽离数据本身及相关操作的方法,model只关心数据本身,遇到的状态管理等信息跟 model 无关,而是作为组件自身的state维护

业务维度model设计

(组件设计方法&)

组件设计方法&

路由组件

纯组件

所需要的数据通过props传递到组件内部

每个组件跟业务数据并没有耦合关系,只是完成自己独立的任务,需要的数据通过 props 传递进来,需要操作的行为通过接口暴露出去。

 而 Container Component 更像是状态管理器,它表现为一个容器,订阅子组件需要的数据,组织子组件的交互逻辑和展示。

(container vs component? &)

container vs component? &

对于我来说,容器是路由的处理程序,它还为该路由获取redux的状态

(组件设计实践&)

组件设计实践&

项目配置路由,路由通常指的是前端路由,由于我们的应用现在通常是单页应用,所以需要前端代码来控制路由逻辑

设计路由组件

Users Container 的表现为 Route Components(这也是 dva 推荐的结构划分),可以理解页面维度的容器

自顶向下的设计方法

定义组件的三种方式

Userlist组件完善

无状态组件(Stateless Component) 

添加静态数据

抽取静态数据

(添加reducers&)

添加reducers&

reducers 主要负责修改 model 的数据(state)

model 的数据就是通过我们分离出来的 reducer 创建出来的

给 Users Model 添加 Reducers,根据新的数据来修改本身的 state,这就是 reducers 要做的事情。

 合适的时机(进入 /users/ )发起(dispatch)了一个 action,修改了 model 的数据,并且通过 Container Components 关联了 model,通过 props 传递到 Presentation Components,组件成功显示。

通过调用 'users/query/success' 这个 reducer,我们就可以将 Users Model 的数据变成静态数据,调用这个 reducer需要关联Model

mapStateToProps({ users }) ,return {users}; 讲Model中的namespace绑定到Component中

在订阅了数据以后,就可以通过 props 访问到 model 的数据了,而 UserList 展示组件的数据,也是 Container Component 通过 props 传递的过来的。

userListProps={dataSource:list}是一个对象,不是解构赋值。

List是Model中state里的值

UserList获取父组件传递下来的dataSource,在Table上注入属性

原先的state是写在父组件中的

(发起Actions&)

发起Actions&

表达的概念是发起一个修改数据的行为,主要的作用是传递信息:

需要注意的是:action的名称(type)如果是在 model 以外调用需要添加 namespace。

除了 type 以外,其它对象中的参数随意定义,都可以在对应的 reducers(effects)中获取,从而实现消息传递,将最新的数据传递过去更新 model 的数据(state)。

在本例中获取用户数据信息的时机就是访问 /users/ 这个页面,所以我们可以监听路由信息,只要路径是 /users/ 那么我们就会发起 action,获取用户数据:

以上代码在浏览器访问 /users 路径的时候就会发起一个 action,数据准备完毕,别忘了回到 index.js 中,添加我们的 models:

(添加Effects&)

添加Effects&

我们是不是可以理解成 Reducers 处理同步,Effects 处理异步?这么理解也没有问题,但是要认清 Reducers 的本质是修改 model 的 state,而 Effects 主要是 控制数据流程 ,所以最终往往我们在 Effects 中会调用 Reducers。

把请求到的值放到playload中,通过action.playload来更新state

其中 call 和 put 是 dva 提供的方便操作 effects 的函数,简单理解 call 是调用执行一个函数而 put 则是相当于 dispatch 执行一个 action,而 select 则可以用来访问其它 model

(定义Services&)

定义Services&

将请求相关(与后台系统的交互)抽离出来,单独放到 /services/ 中,进行统一维护管理

之后无论是更新,删除、添加等操作,跟用户相关的都可以统一放置在 /services/users.js 中。

(mock数据&)

mock数据&

(添加样式&)

添加样式&

(设计布局&)

设计布局&

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

关注
打赏
1665965058
查看更多评论
立即登录/注册

微信扫码登录

0.1151s