Метод PUT в действии и редуктор в Redux

Question

Я создал тип UPDATE_ITEM, но как его здесь кодировать, у меня нет идеи, поскольку я хочу обновить его по его идентификатору. Также я хочу связать это действие с редуктором itemReducer.js, который я дал в коде ниже. Может кто-нибудь помочь мне с кодом? // itemAction.js Action. Маршруты get, delete и add работают, но этот метод put вызывает у меня головную боль.

import axios from 'axios';
import { GET_ITEMS, ADD_ITEM, DELETE_ITEM, UPDATE_ITEM, ITEMS_LOADING } from'./types';

export const getItems = () => dispatch => {
  dispatch(setItemsLoading());

  axios.get('/api/items').then(res =>
    dispatch({
      type: GET_ITEMS,
      payload: res.data
    })
  );
};

export const addItem = item => dispatch => {
  axios.post('/api/items', item).then(res =>
    dispatch({
      payload: res.data
    })
  );
};

 //UPDATE_ITEM Action Here

export const deleteItem = id => dispatch => {
  axios.delete(`/api/items/${id}`).then(res =>
    dispatch({
      type: DELETE_ITEM,
      payload: id
    })
  );
};

export const setItemsLoading = () => {
  return {
    type: ITEMS_LOADING
  };
};

Это itemReducer, который мне тоже нужна помощь

import { GET_ITEMS, DELETE_ITEM, UPDATE_ITEM, ADD_ITEM, ITEMS_LOADING
} from '../actions/types';

const initialState = {
  items: [],
  loading: false
};

export default function(state = initialState, action) {
  switch (action.type) {

  case GET_ITEMS:
    return {
      ...state,
      items: action.payload,
      loading: false
    };

  case DELETE_ITEM:
    return {
      ...state,
      items: state.items.filter(item => item._id !== action.payload)
    };

  //UPDATE_ITEM Reducer here

  case ADD_ITEM:
    return {
      ...state,
      items: [action.payload, ...state.items]
    };


  case ITEMS_LOADING:
    return {
      ...state,
      loading: true
    };

  default:
    return state;
  }
}

Answer 1

import React, { Component } from 'react';
import { Container, ListGroup, ListGroupItem, Button } from 'reactstrap';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { connect } from 'react-redux';
import { getItems, deleteItem, updateItem } from '../actions/itemActions';
import PropTypes from 'prop-types';

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

  onDeleteClick = id => {
    this.props.deleteItem(id);
  };


  render() {
    const { items } = this.props.item;
    return (
      <Container>
        <ListGroup>
          <TransitionGroup className="shopping-list">
            {items.map(({ _id, name, body }) => (
              <CSSTransition key={_id} timeout={500} classNames="fade">
                <ListGroupItem>
                  <Button
                    className="remove-btn"
                    color="danger"
                    size="sm"
                    onClick={this.onDeleteClick.bind(this, _id)}
                  >
                   DELETE
          </Button>

          {/*An update button will be called here*/}
          {/*<Button
                    className="update-btn"
                    color="success"
                    size="sm"
                  >
                  Update 
          </Button>*/}
          

				<div></div>
      <table className="rows">
      <thead>
      <tr>
      <td>Name</td>
      <td>Body</td>
      </tr>
      </thead>
      <tbody>
      <tr>
      <td>{ name }</td>
      <td>{ body }</td>
      </tr>
      </tbody>
      </table>
                </ListGroupItem>
              </CSSTransition>
            ))}
          </TransitionGroup>
        </ListGroup>
      </Container>
    );
  }
}

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

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

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

Answer 2

Полагаю, ваше обновление выглядит как дополнение:

//UPDATE_ITEM Action
export const updateItem = item => dispatch => {
  axios.put('/api/items', item).then(res =>
    dispatch({
      type:'UPDATE_ITEM',
      payload: res.data
    })
  );
};

В вашем редукторе вы можете использовать карту

case UPDATE_ITEM:
    return {
      ...state,
      items: state.items.map(
        item => 
          item._id === action.payload.id
            //return action payload (modified item) instead of
            //  original item when item id is updated item id
            ? action.payload
            : item//ids not the same, return original item
      )
    };