React第三方组件2(状态管理之Refast的使用④中间件middleware使用)

前端人人

发布于 2018-04-11 17:25:44

8170

发布于 2018-04-11 17:25:44

文章被收录于专栏：前端人人前端人人前端人人

本教程总共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 apiRequestAsync from '../../../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 React from 'react';
import Refast, {Component} from 'refast';
import {Toast} from '../../common/layer';
// 引入 logic.js
import logic from './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 TodoList extends 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 (
            <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>
                <Toast ref={e => Refast.use('fn', {Toast: e})}/>
                <div style={{width: '100%', float: 'left', marginTop: 30}}>
                    一共{refast_todoList_log && refast_todoList_log.length}步,当前第 {step} 步
                    <button onClick={() => {
                        if (step >= 2) {
                            this.dispatch('back', refast_todoList_log[step - 2], step - 1)
                        } else {
                            alert('不能再后退了')
                        }
                    }}>后退
                    </button>
                    <button onClick={() => {
                        if (step < refast_todoList_log.length) {
                            this.dispatch('back', refast_todoList_log[step], step + 1)
                        } else {
                            alert('不能再前进了')
                        }
                    }}>前进
                    </button>
                </div>
            </div>
        );
    }
}

export default TodoList;

我们把日志记录在本地localStorage，你也可以不这么做，也可以再存一个状态