Redux还原器状态未正确更新

Question

在我的react应用程序中，我有两个组件(个人物品列表和随机物品列表(。在我的随机项目列表组件中，我可以单击该项目并将其添加到我的个人项目列表组件。但是，当我这样做时，它会用我刚刚添加的新项目替换我个人项目状态中的其他项目。我只是想添加到我的个人物品列表中。

//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);

Answer 1

假设res.data是您刚刚添加的新项，当您调度updateItemList时，我认为您错过了数组的方括号。所以你只是在有效载荷中发送res.data。它应该像这个

updateItemsList([res.data, ...getState().itemsList.items])