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 React from 'react';

class Toast extends 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 ?
                <div className="layer toast" key="toast">{text}</div>
                :
                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 Toast from './Toast'

export {Toast}

4、在demo5 中，修改 TodoList.jsx

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

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

完整代码

import React from 'react';
import Refast, {Component} from 'refast';
import {Toast} from '../../common/layer';
// 引入 logic.js
import logic from './logic';
import List from './List';
import '../../../public/css/todoList.pcss';

class TodoList extends Component {
    constructor(props) {
        super(props, logic);
    }

    componentDidMount() {
        this.dispatch('getTodoList');
    }

    render() {
        let {list} = this.state, {dispatch} = this;
        return (
            <div className="todoList">
                <input type="text" ref="todoInput"/>
                <button onClick={() => this.dispatch('handleAdd', this.refs['todoInput'].value)}>添加</button>
                <div className="cont">
                    <div className="box">
                        全部
                        <List type={0} list={list} dispatch={dispatch}/>
                    </div>
                    <div className="box">
                        未删除
                        <List type={1} list={list} dispatch={dispatch}/>
                    </div>
                    <div className="box">
                        已删除
                        <List type={2} list={list} dispatch={dispatch}/>
                    </div>
                </div>
                <Toast ref={e => Refast.use('fn', {Toast: e})}/>
            </div>
        );
    }
}

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，提示的是服务端返回错误信息！

那这是为什么呢？

主要看这里