React 教程第十五篇 —— 项目应用

实现

该案例是以中间件调用 nodejs 的公共接口,实现一个数据列表。

源码下载:https://github.com/dk-lan/rea…

效果预览

用户名和密码都为空

源码下载后执行下面步骤例可查看效果

  • npm install
  • npm start

Redux 中间件的问题之作用域

在 Redux 中使用中间件可以解决很多问题,但也会有个致命的问题,那就是在同一个组件中多次调用同一个组件,那就会造成作用域污染。

本案例中是这样的场景:

  • 现在要实现在组件cnode中动态加载数据,在该组件中还会有一个输入框,点击时弹窗动态加载一个数据列表,双击数据列表进行填充到对应的输入框中
  • 有一个组件datagrid,用于动态加载数据,ajax 加载使用了中间件。
  • 有一个组件modal,该组件用到弹窗加载一个数据列表datagrid
  • 在组件cnode中调用了组件datagrid<Datagrid config={this.props.cnode.config}/>
  • 在组件cnode中同时调用了组件modal,而组件modal又调用了组件datagrid
  • 这个时候两个datagrid的数据源就会冲突,后面加载的数据冲突了前面加载的。
  • 解决方案是在数据源中对数据源作用域隔离

对象作用域隔离

每次调用组件datagrid时给一个别名name,别名不能重复,用于作用域隔离

static defaultProps = {
    cnode: {
        config: {
            url: 'https://cnodejs.org/api/v1/topics',
            data: {page: 1, limit: 10},
            cols: ['title', 'reply_count', 'top', 'create_at', 'last_reply_at'],
            name: 'cnode'
        }           
    },
    modal: {
        config: {
            type: 'datagrid',
            url: 'https://cnodejs.org/api/v1/topics',
            data: {page: 3, limit: 5},
            cols: ['title'],
            name: 'modal'
        } 
    }
}

Action 中将别名name派发到中间件

export function refresh(_config){
    return {
        types: [constants.Requesting, constants.Requested, constants.RequestError],
        url: _config.url,
        method: _config.method || 'get',
        data: _config.data || {},
        name: _config.name
    }
}

在中间件将别名name一派发到Reducer

let _action = {
    type: constants.Requested,
    name,
    result: res.data
}
dispatch(_action)

Reducer中兼容有别名和没别名的情况,如果有别名,就将数据源作用域隔离

if(action.name){
    _state[action.name] = _state[action.name] || {};
    _state[action.name].dataset = action.result;
} else {
    _state.dataset = action.result;
}

DatagridComponent中判断是否有别名,兼容有别名和没别名的情况,分别操作不同的数据源

let ds = this.props.dataset;
let name = this.props.config.name;
if(name){
    ds = ds[name] ? ds[name].dataset : []
} else {
    ds = ds.dataset || [];
}
    原文作者:DK_Lan
    原文地址: https://segmentfault.com/a/1190000015008796
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞