React third-party component 2 (use of Refast for state management ⑤ LogicRender use)

React third-party component 2 (use of Refast for state management ⑤ LogicRender use)

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

Today we will use Refast's LogicRender!

http://doc.refast.cn/LogicRender.html LogicRender is a logic component used with Refast. It can be used in nest, and specific actions can be executed according to conditions.

Not much nonsense! Get started!

1. Installation dependencies

npm install refast-logic-render --save

2. Configure Decorators

npm i -D babel-plugin-transform-decorators-legacy

Modify .babelrc

"plugins": ["transform-decorators-legacy"]

3. Configure demo7

Copy demo6 to demo7

Modify Index.jsx under demo

import Dome7 from'./demo7/Index'
<NavLink to="/Dome7" activeClassName="selected">demo7</NavLink>
<Route path="/Dome7" component={Dome7}/>

4. Code

Modify TodoList.jsx

import LogicRender, {connect} from'refast-logic-render';

Complete code

import React from'react';
import Refast, {Component} from'refast';
import LogicRender, {connect} from'refast-logic-render';
import {Toast} from'../../common/layer';
//Introduce logic.js
import logic from'./logic';
import List from'./List';
import'../../../public/css/todoList.pcss';

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

    render() {
        let {list, isLoading, isEmpty} = this.state, {dispatch} = this;
        return (
            <div className="todoList">
                <Toast ref={e => Refast.use('fn', {Toast: e})}/>
                <input type="text" ref="todoInput"/>
                <button onClick={() => this.dispatch('handleAdd', this.refs['todoInput'].value)}>Add</button>
                <LogicRender
                    action={'getTodoList'}
                    isLoading={isLoading}
                    Loading={() => <div>Loading</div>}
                    isEmpty={isEmpty}
                    Empty={() => <div>No data yet</div>}
                >
                    <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>
                </LogicRender>
            </div>
        )
    }
}

export default TodoList;

Modify logic.js

Complete code

import apiRequestAsync from'../../../public/js/apiRequestAsync';

export default {
    defaults(props) {
        return {
            list: [],
            isLoading: true,
            isEmpty: false
        }
    },
    handleAdd({getState, setState}, title) {
        if (title) {
            let list = getState().list;
            list.push({id: list.length + 1, title: title, status: 1});
            setState({list: list});
        } else {
            alrt('cannot be empty')
        }
    },
    handleItemEdit({getState, setState}, someState) {
        let {id, status} = someState, list = getState().list;
        list.find(data => data.id === id).status = status;
        setState({list: list})
    },
    async getTodoList({setState, fn}) {
        let todoList = {};
        try {
            todoList = await apiRequestAsync.post('todoList');
            setTimeout(() => {
                //todoList.list = [];//Test empty data
                if (todoList.list.length> 0) {
                    fn.Toast.show('Operation successful');
                    setState({isLoading: false, list: todoList.list})
                } else {
                    fn.Toast.show('No data yet');
                    setState({isLoading: false, isEmpty: true})
                }
            }, 2000);
        } catch (error) {
            fn.Toast.show(error);
        }
    }
}

5. Test, look at the browser

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