Javascript API更新后如何更改存储状态?
假设我有一个POST请求,它将对象中属性的状态更新为true/false 在我的reducer中,在post请求成功后,我将此作为一个操作发送Javascript API更新后如何更改存储状态?,javascript,reactjs,redux,react-redux,Javascript,Reactjs,Redux,React Redux,假设我有一个POST请求,它将对象中属性的状态更新为true/false 在我的reducer中,在post请求成功后,我将此作为一个操作发送 case "ADD_CHANGE_TO_TRUE_RESOLVE": if (action.res.errorCode == 0) { console.log("NO ERROR!"); // DO SOMETHING } 目前,状态可以在后端更改,但除非我刷新页面,否则“true”状态不会反映在DOM中。
case "ADD_CHANGE_TO_TRUE_RESOLVE":
if (action.res.errorCode == 0) {
console.log("NO ERROR!");
// DO SOMETHING
}
目前,状态可以在后端更改,但除非我刷新页面,否则“true”状态不会反映在DOM中。我正在对componentDidMount执行GET请求,以便在页面刷新时获取最新数据
我的问题是,点击按钮触发post请求后,如何立即更改存储中的状态
我要这样做吗
case "ADD_CHANGE_TO_TRUE_RESOLVE":
if (action.res.errorCode == 0) {
console.log("NO ERROR!");
const objChanged = newState.list.find(function (obj) { return obj.id === action.res.data.id; });
objChanged.is_favorite = true;
考虑到我在商店里的状态是:
const currentState = [
{
list: []
}
];
我对redux/react非常陌生,所以不确定我是否做得正确。您可以将状态存储为
this.setState({[stateName]:value});
如果您使用的是ajax或axios,则必须首先像
this.apicallfunction=this.apicallfunction.bindthis 不应该直接改变状态值。此外,在成功的API请求后分派操作时,您可以只传递id作为请求的有效负载
dispatch({
type: 'ADD_CHANGE_TO_TRUE_RESOLVE',
id: res.data.id
})
现在在商店里,你可以像
case "ADD_CHANGE_TO_TRUE_RESOLVE": {
const objIndex = state.list.findIndex(function (obj) { return obj.id === action.id; });
if(objIndex > -1) {
// return the updated state if the id was found
return {
...state,
list: [
...state.list.slice(0, index),
{...state.list[objIndex], is_favorite: true},
...state.list.slice(index + 1)
]
}
}
// otherwise return the state as it is
return state
}
通过在操作中传递id,您可以使用“react addons update”更新它:
import update from 'react-addons-update'
case "ADD_CHANGE_TO_TRUE_RESOLVE": {
if(action.id > -1){
return update(state, {
list: {
[action.id]: {
is_favorite: { $set: true }
}
}
})
}
else{
return state
}
}
哦,我忘了提到newState已经是一个副本了,就像我在我的reducer上声明的那样->让newState=Object.assign{},currentState;。如果它已经是副本,那么我的示例是否正确?当您使用Object.assign时,您的状态仅被复制了一层,因此列表中的内部对象仍将指向相同的引用