親から削除アクションの結果を受け取ったときに、子コンポーネントが更新されない

Question

parent componentは、アイテムの取得と削除のアクションをディスパッチします。 子コンポーネントにはアイテムのリストが含まれ、削除ボタンが含まれています。ここで

がイベント私の知る限り

**Retrieve Address List:** 
Parent fetches list > Pass to Child > Display in Child <br> [ ->✓ Works well] 

**Delete and Address** 
Child invokes delete action > Action dispatched via parent > Result received in parent > Result sent to child via props > Child re-renders <br> [ -> ✘ Object is deleted in server but component desn't re-render] 

の一連の私の計画だが、一連のイベントは、それを再描画するために強制的に最終的にはコンポーネントの状態を更新する必要があります。私は何が欠けていますか？

Parent Component

class Parent extends React.Component 
{ 
    componentWillMount() 
    { 
     store.dispatch(fetchShippingAddresses()); 
    } 

    deleteAddress(address_id) 
    { 
     store.dispatch(deleteShippingAddress(address_id)); 
    } 

    render() 
    { 
     let shippingAddresses = this.props.shippingAddressesList; 
     let deleteShippingAddressData = this.props.deleteShippingAddressData; 

     return (

     <AddressList 
      shippingAddresses={shippingAddresses} 
      deleteAddresses ={(address_id) => this.deleteAddress(address_id)} 
      deleteShippingAddressData: this.props.deleteShippingAddressData 

    ) 
    } 

} 

function mapStateToProps(state) 
{ 
    return { 
     shippingAddressesList : state.shippingAddressesList, 
     deleteShippingAddressData : state.deleteShippingAddressData 
    } 
} 

export default connect(mapStateToProps)(DashboardBody); 

Child Component

class AddressList extends React.Component 
{ 
    constructor(props) 
    { 
     super(props); 
     this.state = 
     { 
      shippingAddresses: [], 
      deleteShippingAddressData: {} 
     } 
    } 

    componentWillReceiveProps(nextProps) 
    { 
     this.state.shippingAddresses !== nextProps.shippingAddresses && 
      this.setState({ shippingAddresses: nextProps.shippingAddresses }); 

     this.state.deleteShippingAddressData !== nextProps.deleteShippingAddressData && 
     this.setState({ deleteShippingAddressData: nextProps.deleteShippingAddressData}); 
    } 

    render() 
    { 
     addresses = this.state.shippingAddresses; 
     return (

     <div > 
      { addresses && addresses.data.map((address, i) => 

       <p key={i}> 
        {address.address_name} 
        <button onClick={ event => this.props.deleteAddress(address.id) }> 
        Delete 
        </button> 
       </p> 

      )} 
     </div> 

    ) 
    } 
} 

Delete Action

import axios from 'axios'; 

export function deleteShippingAddress(address_id) 
{ 
    return function(dispatch) 
    { 
     dispatch(destroyShippingAddressSuccess(false)); 
     dispatch(destroyShippingAddressError(null)); 

     const request = axios 
     ({ 
      url: `http://api.stagingapp.io/location/v1/shipping/address/${address_id}`, 
      method: "delete", 
      dataType: 'json', 
      headers: { 
       'Content-Type': 'application/json', 
       'Accept': 'application/json', 
       'Authorization': 'Bearer ' + localStorage.getItem('access_token') } 
     }) 

     .then(function(response) 
     { 
      destroyShippingAddressSuccess(response); 
     }) 
     .catch(function(error) 
     { 
      dispatch(destroyShippingAddressError(error)); 
      console.log(error) 
     }); 

     return { type: 'DESTROY_SHIPPING_ADDRESS_SUCCESS', payload: request } 

    }; 

} 

function destroyShippingAddressSuccess(deleteShippingAddressData) 
{ 
    return { type: 'DESTROY_SHIPPING_ADDRESS_SUCCESS', deleteShippingAddressData}; 
} 
function destroyShippingAddressError(deleteShippingAddressError) 
{ 
    return { type: 'DESTROY_SHIPPING_ADDRESS_ERROR', deleteShippingAddressError }; 
} 

export default deleteShippingAddress; 

あなたの減速で

Deletion Reducer

export default function deleteShippingAddressReducer 
    (state = { deleteShippingAddressError:'', deleteShippingAddressData:'' }, action) 

     { 
      switch (action.type) 
      { 
       case 'DESTROY_SHIPPING_ADDRESS_SUCCESS': 
        return Object.assign({}, state, { deleteShippingAddressData: action.deleteShippingAddressData}); 

       case 'DESTROY_SHIPPING_ADDRESS_ERROR': 
        return Object.assign({}, state, { deleteShippingAddressError: action.deleteShippingAddressError }); 

       default: return state; 
      } 
     } 
    // 
// 

Answer 1

、あなたはaction.deleteShippingAddressを使用しているが、あなたの行動の作成者に、あなたはdestroyShippingAddressDataを持つオブジェクトを作成しています。保持したい名前に応じて、リデューサまたはアクションに一致するように名前を変更します。