React third-party component 2 (use of Refast for state management ③extended ctx)

React third-party component 2 (use of Refast for state management ③extended ctx)

There are 5 articles in this tutorial, one updated daily, please follow us! You can enter the historical news to view the previous articles, and stay tuned for our new articles!

1. React third-party component 2 (use of Refast for state management①simple use) ---2018.01.29

2. React third-party component 2 (use of Refast for state management ②asynchronous modification of state) ---2018.01.30

3. React third-party component 2 (use of Refast for state management ③extended ctx) ---2018.02.31

4. React third-party component 2 (use of Refast for state management ④ use of middleware) ---2018.02.01

5. React third-party components 2 (use of Refast for state management ⑤ use of LogicRender) ---2018.02.02

Development environment: Windows 8, node v8.9.1, npm 5.5.1, WebStorm 2017.2.2

Let's talk about expanding ctx today.

Why extend ctx?

For example, your asynchronous request will have a loading reminder, or if the request is successful, it will give a reminder!

What we have to do today is to give a reminder after the request is successful, and a reminder if it fails!

1. Let's first build a prompt component Toast.jsx

In app -> common -> new layer folder -> new 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. Add style

.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. Export this component

layer -> Index.jsx

import Toast from'./Toast'

export {Toast}

4. In demo5, modify TodoList.jsx

import {Toast} from'../../common/layer';
<Toast ref={e => Refast.use('fn', {Toast: e})}/>

Complete code

import React from'react';
import Refast, {Component} from'refast';
import {Toast} from'../../common/layer';
//Introduce 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)}>Add</button>
                <div className="cont">
                    <div className="box">
                        All
                        <List type={0} list={list} dispatch={dispatch}/>
                    </div>
                    <div className="box">
                        Not deleted
                        <List type={1} list={list} dispatch={dispatch}/>
                    </div>
                    <div className="box">
                        deleted
                        <List type={2} list={list} dispatch={dispatch}/>
                    </div>
                </div>
                <Toast ref={e => Refast.use('fn', {Toast: e})}/>
            </div>
        );
    }
}

export default TodoList;

5. Modify logic.js

async getTodoList({setState,fn}) {
    let todoList = await apiRequestAsync.post('todoList');
    fn.Toast.show('Operation successful');
    setState({list: todoList.list})
}

6. Look at the browser effect

7. Deal with the error message

async getTodoList({setState,fn}) {
    let todoList = {};
    try {
        todoList = await apiRequestAsync.post('todoList');
        fn.Toast.show('Operation successful');
        setState({list: todoList.list})
    } catch (error) {
        fn.Toast.show('Operation failed');
    }
}

Modify todoList.js under mock

8. Look at the browser

The OK exception was also caught!

9. You can also write like this

How to write if you want to prompt the error returned by the server?

10. Look at the browser again

OK, the prompt is that the server returns an error message!

So why is this?

Mainly look here

Reference: https://cloud.tencent.com/developer/article/1092833 React third-party component 2 (use of Refast for state management ③extended ctx)-Cloud + Community-Tencent Cloud