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

本教程总共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异步修改state！

1、我们先把 demo4 复制一份到demo5

2、修改logic.js

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

export default {
    defaults(props) {
        return {
            list: []
        }
    },
    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}) {
        let todoList = await apiRequestAsync.post('todoList');
        setState({list: todoList.list})
    }
}

3、修改TodoList.jsx

import React from 'react';
import Refast, {Component} from 'refast';
// 引入 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>
            </div>
        );
    }
}

export default TodoList;

4、修改demo 下 Index.jsx 添加 demo5 路由

import Dome5 from './demo5/Index'

<NavLink to="/Dome5" activeClassName="selected">demo5</NavLink>

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

5、浏览器

成功获取到mock假数据！

本文完 

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!

来源：React第三方组件2(状态管理之Refast的使用②异步修改state)-留客客-获客营销saas系统