Question

我已经创建了一个UPDATE_ITEM类型，但是在这里如何编码它却没有想法，因为我想通过其ID更新它。我也想用我在下面的代码中给出的reducer itemReducer.js来实现此动作。有人可以帮我提供代码吗？// itemAction.js操作。获取，删除和添加路由有效，但是这种放置方法让我头疼。

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

我猜您的更新看起来像添加的内容：

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

在减速器中，您可以使用map

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

Answer 2

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

PUT方法在Redux中的作用和化简

2 个答案: