微信公众号首发
本教程总共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
官网地址：http://doc.refast.cn/Middleware.html
Refast 支持自定义一个中间件，帮助用户在组件 setState 之前，进行数据比对、条件执行、记录日志、数据回溯等特定的操作。
这里以记录日志的功能来说明中间件的写法和用法。记录日志的功能会帮我们在每次 state 更新时，都将新的 state 记录下来，使得 state 的更新历史清晰透明。
我们今天来用下Refast的中间件 middleware！
我们要实现回退跟前进功能！
废话不多说，直接上代码！
1、建立demo6
把demo5复制一份程demo6
然后在 demo -> Index.jsx 文件里 把路由加上！
2、引入 middleware
const logState = ctx => next => (...args) => {
console.log('######### PRINT STATE LOG #########');
console.log('ctx:', ctx.getState().list, new Date().getTime());
console.log('args:', args[0].list, new Date().getTime());
// 如果不执行 next， 则中止组件 state 更新
next(...args);
};
// logState 可以是一个函数
// 也可以是一个函数组, 从前到后依次执行
Refast.use('middleware', [logState]);
3、看下浏览器
我们可以看到，只要是更新状态，旧状态和新状态都会被打印出来
4、实现 前进 与后退功能
修改 logic.js 文件
完整代码
import apiRequestAsyncfrom '../../../public/js/apiRequestAsync';
export default {
defaults(props) {
return {
list: [],
step:1,
back:false
}
},
back({setState}, data, step) {
setState({back:true, list: data, step: step})
},
handleAdd({getState, setState}, title) {
if (title) {
let list = getState().list;
list.push({id: list.length +1, title: title, status:1});
setState({list: list, step: getState().step +1, back:false});
}else {
alert('不能为空')
}
},
handleItemEdit({getState, setState}, someState) {
let {id, status} = someState, list = getState().list;
list.find(data => data.id === id).status = status;
setState({list: list, step: getState().step +1, back:false})
},
async getTodoList({setState, fn}) {
let todoList = {};
try {
todoList =await apiRequestAsync.post('todoList');
fn.Toast.show('操作成功');
setState({list: todoList.list, step:2});
}catch (error) {
fn.Toast.show(error);
}
}
}
新加了 step，back 状态
step：记录步骤数量，初始化为第1步
back ：是否是前进与后退操作
如果是前进与后退操作，则back为真，step接收传过来的步骤值！
不管是添加还是编辑，都会增加一步
获取完数据，其实是第2步，初始化是第1步
5、修改 TodoList.jsx文件
完整代码如下：
import Reactfrom 'react';
import Refast, {Component}from 'refast';
import {Toast}from '../../common/layer';
// 引入 logic.js
import logicfrom './logic';
import List from './List';
import '../../../public/css/todoList.pcss';
const logState = ctx => next => (...args) => {
console.log('######### PRINT STATE LOG #########');
console.log('ctx:', ctx.getState().list, new Date().getTime());
console.log('args:', args[0].list, new Date().getTime());
if (!args[0].back) {
let refast_todoList_log = JSON.parse(localStorage.getItem('refast-todoList-log'));
refast_todoList_log.push(args[0].list);
localStorage['refast-todoList-log'] = JSON.stringify(refast_todoList_log);
}
// 如果不执行 next， 则中止组件 state 更新
next(...args);
};
// logState 可以是一个函数
// 也可以是一个函数组, 从前到后依次执行
Refast.use('middleware', [logState]);
class TodoListextends Component {
constructor(props) {
super(props, logic);
}
componentDidMount() {
localStorage.setItem('refast-todoList-log', JSON.stringify([[]]));
this.dispatch('getTodoList');
}
render() {
let {list, step} =this.state, {dispatch} =this;
let refast_todoList_log = JSON.parse(localStorage.getItem('refast-todoList-log'));
return (
this.dispatch('handleAdd', this.refs['todoInput'].value)}>添加
全部
未删除
已删除
Refast.use('fn', {Toast: e})}/>
一共{refast_todoList_log && refast_todoList_log.length}步,当前第 {step} 步
{
if (step >=2) {
this.dispatch('back', refast_todoList_log[step -2], step -1)
}else {
alert('不能再后退了')
}
}}>后退
{
if (step < refast_todoList_log.length) {
this.dispatch('back', refast_todoList_log[step], step +1)
}else {
alert('不能再前进了')
}
}}>前进
);
}
}
export default TodoList;
我们把日志记录在 本地localStorage，你也可以不这么做，也可以再存一个状态
组件渲染完，初始化 refast-todoList-log 为 数组里有个空数组
渲染的时候去取这个值
这一刻为前进和后退按钮，具体逻辑就不细讲了，大家自己想下！
6、我们看下浏览器效果
OK 实现完成
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!