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

微信公众号首发

本教程总共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 apiRequestAsyncfrom '../../../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 Reactfrom 'react';

import Refast, {Component}from 'refast';// 引入 logic.js

import logicfrom './logic';

import List from './List';

import '../../../public/css/todoList.pcss';

class TodoListextends Component {

constructor(props) {

super(props, logic);

   }

componentDidMount() {

this.dispatch('getTodoList');

   }

render() {

let {list} =this.state, {dispatch} =this;

       return (

               

               this.dispatch('handleAdd', this.refs['todoInput'].value)}>添加

               

                   

                       全部

                   

                       未删除

                   

                       已删除

       );

   }

}

export default TodoList;

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

import Dome5 from './demo5/Index'

demo5

5、浏览器

成功获取到mock假数据！

本文完

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

感谢童鞋们支持!

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