React第三方组件2(状态管理之Refast的使用③扩展ctx

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1、React第三方组件2(状态管理之Refast的使用①简单使用)---2018.01.29

2、React第三方组件2(状态管理之Refast的使用②异步修改state)---2018.01.30

3、React第三方组件2(状态管理之Refast的使用③扩展ctx)---2018.02.31

4、React第三方组件2(状态管理之Refast的使用④中间件middleware使用)---2018.02.01

5、React第三方组件2(状态管理之Refast的使用⑤LogicRender使用)---2018.02.02

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

我们今天讲下扩展ctx。

为什么要扩展ctx？

比如说你异步请求会有个加载提示，或者说请求成功给个提示！

我们今天要做的就是请求成功后给个提示，失败也会给个提示！

1、我们先建一个提示组件  Toast.jsx

在 app -> common -> 新建 layer 文件夹 -> 新建 Toast.jsx

import Reactfrom 'react';

class Toastextends React.Component {

constructor(props) {

super(props);

       this.state = {

show:false,

           text:''

       };

   }

show(text) {

this.setState({show:true, text: text}, () =>setTimeout(() =>this.setState({show:false}), 2000))

}

render() {

let {show, text} =this.state;

       return [

show ?

{text}

               :

null

       ];

   }

}

export default Toast;

2、添加样式

.layer {

&.toast {

background-color:rgba(0, 0, 0, 0.6);

   color:#ffffff;

   width:auto;

   padding:5px 10px;

   border-radius:4px;

   position:absolute;

   top:50%;

   left:50%;

   transform:translate(-50%, -50%);

 }

}

3、导出这个组件

layer -> Index.jsx

import Toastfrom './Toast'

export {Toast}

4、在demo5 中，修改 TodoList.jsx

import {Toast}from '../../common/layer';

Refast.use('fn', {Toast: e})}/>

完整代码

import Reactfrom 'react';

import Refast, {Component}from 'refast';

import {Toast}from '../../common/layer';

// 引入 logic.js

import logicfrom './logic';

import List from './List';

import '../../../public/css/todoList.pcss';

class TodoListextends Component {

constructor(props) {

super(props, logic);

   }

componentDidMount() {

this.dispatch('getTodoList');

   }

render() {

let {list} =this.state, {dispatch} =this;

       return (

               

               this.dispatch('handleAdd', this.refs['todoInput'].value)}>添加

               

                   

                       全部

                   

                       未删除

                   

                       已删除

                Refast.use('fn', {Toast: e})}/>

       );

   }

}

export default TodoList;

5、修改 logic.js

async getTodoList({setState,fn}) {

let todoList =await apiRequestAsync.post('todoList');

   fn.Toast.show('操作成功');

   setState({list: todoList.list})

}

6、看下浏览器效果

7、处理下 错误提示

async getTodoList({setState,fn}) {

let todoList = {};

   try {

todoList =await apiRequestAsync.post('todoList');

       fn.Toast.show('操作成功');

       setState({list: todoList.list})

}catch (error) {

fn.Toast.show('操作失败');

   }

}

修改下 mock 下的 todoList.js

8、看下浏览器

OK 异常也捕获到了！

9、还可以这样写

如果要提示服务端返回的错误应该如何写？

10、再看下浏览器

OK，提示的是 服务端返回错误信息！

 那这是为什么呢？

主要看这里