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假数据！

本文完 














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

感谢童鞋们支持!

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