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

本教程总共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

今天我们来用下Refast的LogicRender!

http://doc.refast.cn/LogicRender.html LogicRender 是一个配合 Refast 使用的逻辑组件。可以嵌套使用，可以根据条件执行特定的 Action。

废话不多说！撸码开始！

1、安装依赖

npm install refast-logic-render --save

2、配置Decorators

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

修改 .babelrc

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

3、配置demo7

把demo6 复制一份程 demo7

修改 demo下的 Index.jsx

import Dome7 from './demo7/Index'

<NavLink to="/Dome7" activeClassName="selected">demo7</NavLink>

<Route path="/Dome7" component={Dome7}/>

4、撸码

修改 TodoList.jsx

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

完整代码

import React from 'react';
import Refast, {Component} from 'refast';
import LogicRender, {connect} from 'refast-logic-render';
import {Toast} from '../../common/layer';
// 引入 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)}>添加</button>
                <LogicRender
                    action={'getTodoList'}
                    isLoading={isLoading}
                    Loading={() => <div>加载中</div>}
                    isEmpty={isEmpty}
                    Empty={() => <div>暂无数据</div>}
                >
                    <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>
                </LogicRender>
            </div>
        )
    }
}

export default TodoList;

修改 logic.js

完整代码

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 {
            alert('不能为空')
        }
    },
    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 = [];   //测试 空数据
                if (todoList.list.length > 0) {
                    fn.Toast.show('操作成功');
                    setState({isLoading: false, list: todoList.list})
                } else {
                    fn.Toast.show('暂无数据');
                    setState({isLoading: false, isEmpty: true})
                }
            }, 2000);
        } catch (error) {
            fn.Toast.show(error);
        }
    }
}

5、测试，看下浏览器