Элемент не удаляется из массива с помощью Redux

Question

Я следую руководству, пытающемуся изучить Redux. Я получил первое действие, которое является простым вызовом GET API, но я застрял на следующем действии, которое я пытаюсь создать. Код выглядит следующим образом:

В компоненте:

class ShoppingList extends Component {
  componentDidMount() {
    this.props.getItems();
  }

  handleClick = id => {
    console.log("component " + id);
    this.props.deleteItem(id);
  };

  render() {
    const { items } = this.props.item;

    return (
      <Container>
        <ListGroup>
          <TransitionGroup className="shoppingList">
            {items.map(({ id, name }) => (
              <CSSTransition key={id} timeout={500} classNames="fade">
                <ListGroupItem>
                  <Button
                    className="button1"
                    color="danger"
                    size="sm"
                    onClick={e => this.handleClick(id, e)}
                  >
                    &times;
                  </Button>
                  {name}
                </ListGroupItem>
              </CSSTransition>
            ))}
          </TransitionGroup>
        </ListGroup>
      </Container>
    );
  }
}

ShoppingList.propTypes = {
  getItems: PropTypes.func.isRequired,
  item: PropTypes.object.isRequired,
  deleteItem: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  item: state.item
});

export default connect(mapStateToProps, { getItems, deleteItem })(ShoppingList);

В моем редукторе:

const initialState = {
  items: [
    { id: 3, name: "Eggs" },
    { id: 4, name: "Milk" },
    { id: 5, name: "Steak" },
    { id: 6, name: "Water" }
  ]
};

export default function(state = initialState, action) {
  switch (action.type) {
    case GET_ITEMS:
      return {
        ...state
      };
    case DELETE_ITEM:
      console.log("reducer");
      return {
        ...state,
        items: state.items.filter(item => item.id !== action.id)
      };
    default:
      return state;
  }
}

В моем файле действий:

export const getItems = () => {
  return {
    type: GET_ITEMS
  };
};

export const deleteItem = id => {
  console.log("actions");
  return {
    type: DELETE_ITEM,
    payload: id
  };
};

Однако, когда я нажимаю на кнопку, чтобы попытаться удалить элемент из списка, ничего не происходит. Я вижу в консоли Redux, что действие отправляется, но, похоже, оно не имеет никакого эффекта. Есть предложения?

Answer 1

У вас есть deleteItem действие { type, payload }. Вместо этого вы можете указать { type, id } или использовать payload в операторе возврата редуктора.

Я бы сделал следующее - поэтому вы передаете id с action вместо payload:

export const deleteItem = id => {
  console.log("actions");
  return {
    type: DELETE_ITEM,
    id
  };
};

Или лучший вариант для более поздних целей - оставьте payload просто добавив id в качестве свойства:

// action
export const deleteItem = id => {
  console.log("actions");
  return {
    type: DELETE_ITEM,
    payload: { id }
  };
};

// reducer
case DELETE_ITEM:
   // here destructuring the property from payload
   const { id } = action.payload;
   return {
      ...state,
      items: state.items.filter(item => item.id !== id)
   };

Надеюсь, это поможет!