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

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})
    }
}

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;

import Dome5 from './demo5/Index'

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

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