models.js
export default {
namespace: 'myModel',
state: {
data: {
list: [
{ i: 1, disabled: false},
{ i: 2, disabled: false},
{ i: 3, disabled: false},
],
keys: '',
},
},
effects: {
*fetch({ payload }, { call, put }) {
const response = yield call(getData, payload);
yield put({
type: 'update',
payload: response,
});
},
},
reducers: {
saveState(state, { payload }) {
return {
...state,
...payload,
};
},
}
};
A页面
// 方法
const handle = () => {
const { myModel: { data } } = this.props;
data.list.forEach(item => item.disabled = true };
// 为什么我没执行下面的代码 这个在model 里的 data 也会更新了
// dispatch({
// type: 'myModel/saveState',
// payload: {
// data
// }
// })
}
B页面
render() {
const { myModel: { data } } = this.props;
// A页面执行了handle方法后 为什么这里的data也会更新了
console.log(data);
}
分割线
或者说我上面操作是错的? 应该先把数据放到A页面的state, 不能直接修改props
A页面
constuctor() {
super();
this.state = {
myData: props.myModel.data
}
}
// 方法
const handle = () => {
const { myData } = this.state;
myData.list.forEach(item => item.disabled = true };
dispatch({
type: 'myModel/saveState',
payload: {
data: myData
}
})
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…