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 支持自定义一个中间件,帮助用户在组件 setState 之前,进行数据比对、条件执行、记录日志、数据回溯等特定的操作。
这里以记录日志的功能来说明中间件的写法和用法。记录日志的功能会帮我们在每次 state 更新时,都将新的 state 记录下来,使得 state 的更新历史清晰透明。
我们今天来用下Refast的中间件 middleware!
我们要实现回退跟前进功能!
废话不多说,直接上代码!
1、建立demo6
把demo5复制一份程demo6
然后在 demo -> Index.jsx 文件里 把路由加上!
2、引入 middleware
constlogState= ctx => next => (...args) => {
console.log('######### PRINT STATE LOG #########');
console.log('ctx:',ctx.getState().list,newDate().getTime());
console.log('args:',args[].list,newDate().getTime());
// 如果不执行 next, 则中止组件 state 更新
next(...args);
};
// logState 可以是一个函数
// 也可以是一个函数组, 从前到后依次执行
Refast.use('middleware',[logState]);
3、看下浏览器
我们可以看到,只要是更新状态,旧状态和新状态都会被打印出来
4、实现 前进 与后退功能
修改 logic.js 文件
完整代码
importapiRequestAsyncfrom'../../../public/js/apiRequestAsync';
export default{
defaults(props) {
return{
list: [],
step:1,
back:false
}
},
back(,data,step) {
setState({back:true,list: data,step: step})
},
handleAdd(,title) {
if(title) {
letlist = getState().list;
list.push({id: list.length+1,title: title,status:1});
setState({list: list,step: getState().step+1,back:false});
}else{
alert('不能为空')
}
},
handleItemEdit(,someState) {
let= someState,list = getState().list;
list.find(data => data.id=== id).status= status;
setState({list: list,step: getState().step+1,back:false})
},
asyncgetTodoList() {
lettodoList = {};
try{
todoList =awaitapiRequestAsync.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文件
完整代码如下:
importReactfrom'react';
importRefast,from'refast';
importfrom'../../common/layer';
// 引入 logic.js
importlogicfrom'./logic';
importListfrom'./List';
import'../../../public/css/todoList.pcss';
constlogState= ctx => next => (...args) => {
console.log('######### PRINT STATE LOG #########');
console.log('ctx:',ctx.getState().list,newDate().getTime());
console.log('args:',args[].list,newDate().getTime());
if(!args[].back) {
letrefast_todoList_log = JSON.parse(localStorage.getItem('refast-todoList-log'));
refast_todoList_log.push(args[].list);
localStorage['refast-todoList-log'] = JSON.stringify(refast_todoList_log);
}
// 如果不执行 next, 则中止组件 state 更新
next(...args);
};
// logState 可以是一个函数
// 也可以是一个函数组, 从前到后依次执行
Refast.use('middleware',[logState]);
classTodoListextendsComponent {
constructor(props) {
super(props,logic);
}
componentDidMount() {
localStorage.setItem('refast-todoList-log',JSON.stringify([[]]));
this.dispatch('getTodoList');
}
render() {
let=this.state,=this;
letrefast_todoList_log = JSON.parse(localStorage.getItem('refast-todoList-log'));
return(
this.dispatch('handleAdd',this.refs['todoInput'].value)}>添加
全部
未删除
已删除
一共步,当前第 步
{
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 defaultTodoList;
我们把日志记录在 本地localStorage,你也可以不这么做,也可以再存一个状态
组件渲染完,初始化 refast-todoList-log 为 数组里有个空数组
渲染的时候去取这个值
这一刻为前进和后退按钮,具体逻辑就不细讲了,大家自己想下!
6、我们看下浏览器效果
OK 实现完成
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!
领取专属 10元无门槛券
私享最新 技术干货