Redux 減速機 State 未正確更新

Question

在我的反應應用程序中，我有兩個組件（個人項目列表和隨機項目列表）。 在我的隨機項目列表組件中，我可以單擊該項目並將其添加到我的個人項目列表組件中。 但是，當我這樣做時，它會用我剛剛添加的新項目替換我的個人項目 state 中的其他項目。 我只是想添加到我的個人物品清單中。

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