实现
该案例是以中间件调用 nodejs 的公共接口,实现一个数据列表。
源码下载:https://github.com/dk-lan/rea...
效果预览
用户名和密码都为空
源码下载后执行下面步骤例可查看效果
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 || [];
} (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|