[英]Redux Reducer State Not Updating Properly
In my react app, I have two components(personal items list and random items list).在我的反应应用程序中,我有两个组件(个人项目列表和随机项目列表)。 In my random items list component, I can click on the item and add it to my personal items list component.
在我的随机项目列表组件中,我可以单击该项目并将其添加到我的个人项目列表组件中。 However, when I do that it replaces my other items in my personal items state with the new item I just added.
但是,当我这样做时,它会用我刚刚添加的新项目替换我的个人项目 state 中的其他项目。 I simply want to add on to my personal items list.
我只是想添加到我的个人物品清单中。
//Update Items List
export const updateItemsList = (data) => ({
type : UPDATE_ITEMS_LIST,
payload: data
});
//Items List Reducer
const initialState = {
items: [],
loading: false
};
export default function(state = initialState, action){
switch(action.type){
case UPDATE_ITEMS_LIST:
return{
...state,
items: action.payload,
loading: false
};
default:
return state;
}
}
//Select Item To Add
export const addItemToList = (itemId) => (dispatch, getState) =>{
const config = {
headers:{
"Content-Type": "application/json"
}
};
axios.post(`/api/items/addItem/${itemId}`, {}, config)
.then(res => {
dispatch({
type: ADD_ITEM_SUCCESS,
payload: res.data
})
dispatch(updateItemsList(res.data, ...getState().itemsList.items));
})
.catch(err =>{
dispatch({type: ADD_ITEM_ERROR}));
});
};
//React User's Item List Component
class Items extends Component{
componentDidMount(){
this.props.userItems();
}
render(){
const { items, loading} = this.props.itemsList;
return(
<React.Fragment>
{loading === true ? (
<div>
<div>
<h1>Your Items Are Loading...</h1>
</div>
</div>
):(
<div>
{items.map(item => (
<React.Fragment key={item.id}>
<div>
<div>
<h3>{item.name}</h3>
</div>
</div>
</React.Fragment>
))}
</div>
)}
</React.Fragment>
);
}
};
export default connect(mapStateToProps, mapActionsToProps)(Items);
//React Random Item List Component
class RandomItems extends Component{
handleAddItem = (id) =>{
this.props.addItemToList(id);
}
componentDidMount(){
this.props.getRandomItemsList();
}
render(){
const { randomItems, loading} = this.props.randomItemsList;
return(
<React.Fragment>
{loading === true ? (
<div>
<div>
<h1>Loading Random Items...</h1>
</div>
</div>
): (
<div>
{randomItems.map(item => (
<React.Fragment key={item.id}>
<div>
<div>
<h3>{item.name}</h3>
<button onClick={this.handleAddItem.bind(this, item.id)}>Add To List</button>
</div>
</div>
</React.Fragment>
))}
</div>
)}
</React.Fragment>
)
}
};
export default connect(mapStateToProps, mapActionsToProps)(RandomItems);
assuming res.data
is the new item you just added, when you dispatch updateItemList I think you missed the square bracket for the array.假设
res.data
是您刚刚添加的新项目,当您发送 updateItemList 时,我认为您错过了数组的方括号。 so you just sending res.data
in the payload.所以你只需在有效负载中发送
res.data
。 it should be like this应该是这样的
updateItemsList([res.data, ...getState().itemsList.items])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.