更新一条记录，不在重新刷新所有记录
- 1 尝试
reducers: {
save(state, action) {
return {
...state,
data: action.payload,
};
},
edit(state, action) {
console.log(state);
console.log(action);
let contact = action.payload.object;
const listNew = [];
for(let i=0;
i.data.list[i] && state.data.list[i].id === contact.id){
let obj = state.data.list[i];
obj.contact= contact.contact;
obj.contactPhone =contact.contactPhone;
obj.contactEmail =contact.contactEmail;
listNew.push(obj);
}else{
listNew.push(state.data.list[i] );
}
}
// return {
//state :{
//data :{
//list : listNew
//},
//pagination: state.data.pagination
//},
//data: action.payload
// };
// return {
//...state,
//data: action.payload,
// };
},
},实时的显示效果出了，但是报错! 报错信息如下。
index.c7e627f5.js:1 uncaught at t Error: Given action “regulatedOrg/edit”, reducer “regulatedOrg” returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.
at http:/**/static/index.c7e627f5.js:1:783603
- 2 antd 是react + dva( redux 和 redux-saga) 所有需要有 es6的基础。一直搜问题和问问题，大家都说 reducer 就是改变 state 的状态（数据）的。但是一直在纠结怎么才能改变呢？我在卡到return 的
return {
...state ,//ES6不完全解构赋值
//这里的data是替换数据结构（JSON）的的data
data: {
list : listNew,
pagination: state.data.pagination
}
};
es6知识点详解：
ES6入门指南
看成功代码：
edit(state, action) {
let contact = action.payload.object;
const listNew = [];
for(let i=0;
i.data.list[i] && state.data.list[i].id === contact.id){
let obj = state.data.list[i];
obj.contact= contact.contact;
obj.contactPhone =contact.contactPhone;
obj.contactEmail =contact.contactEmail;
listNew.push(obj);
}else{
listNew.push(state.data.list[i] );
}
}
return {
...state ,
data: {
list : listNew,
pagination: state.data.pagination
}
};
},整个model 的代码，没耐心看到这里，估计还是没啥作用（smiling back）
import { queryRegulatedOrg, updateContact} from '../services/api';
export default {
namespace: 'regulatedOrg',
//这里是自定model的数据（JSON）格式的,不要忽略这里，在connect 后其他使用是，取数据就是按照这个取得。
state: {
data: {
list: [],
pagination: {},
},
},effects: {
*fetch({ payload }, { call, put }) {
const response = yield call(queryRegulatedOrg, payload);
yield put({
type: 'save',
payload: response,
});
},
*editContact({ payload, callback }, { call, put }) {
const response = yield call(updateContact, payload);
yield put({
type: 'edit',
payload: response,
});
if (callback) callback(response);
}
},reducers: {
save(state, action) {
return {
...state,
data: action.payload,
};
},
edit(state, action) {
let contact = action.payload.object;
const listNew = [];
for(let i=0;
i【react|Ant Design Model 实时更新数据采坑日记】相关链接：
redux学习笔记之combineReducers源码解析
Redux系列x：源码解析
Redux中文帮助文档
推荐阅读
- 前端|面试官（谈谈Vue和React的区别（））
- react|高德地图的使用及自定义图标
- React|【React Native开发】React Native控件之RefreshControl组件详解(21)
- React|React Native开源项目-嘎嘎商城客户端(持续更新中)
- 工作与生活|2016总结,真正新的里程碑和新起点
- React|【React Native开发】React Native应用设备运行(Running)以及调试(Debugging)(3)
- React|【React Native开发】React Native控件之ListView组件讲解以及最齐全实例(19)
- React|React Native控件之PullToRefreshViewAndroid下拉刷新组件讲解(20)
- React|【React Native开发】React Native控件之Text组件讲解(9)
- react学习之旅|react+antd-mobile之项目构建+基础配置