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 || [];
}