Redux：店舗状態の更新時に子供たちを再レンダリングする

Question

私は最近react + reduxを学び始めました。これに先立って私はこの種のスタックでの経験は持っていません。 なぜ私は、減速機が新しい状態を返すときに子コンポーネントが再レンダリングされないのか理解できない問題に遭遇しました。 Full code on GITHUB

これは私の親コンポーネントsource on git次のとおりです。

import React from "react" 
import {connect} from "react-redux" 

import {fetchWarehouses} from "../../actions/warehouseActions" 

import WarehouseMenu from "./WarehouseMenu" 
import WarehouseView from "./WarehouseView" 
import WarehouseEdit from "./WarehouseEdit" 

@connect((store) => { 
    return { 
     warehouses: store.warehouses.warehouses, 
     selectedWarehouse: store.warehouses.selectedWarehouse, 
     isSelected: store.warehouses.isSelected, 
     warehouseCount: store.warehouses.warehouseCount, 
    } 
}) 
export default class WarehousePage extends React.Component { 

    componentWillMount() { 
     this.props.dispatch(fetchWarehouses()) 
    } 

    render() { 
     return (
      <div className="container-fluid"> 
       <div className="row"> 
        <div className="col-sm-2"> 
         Warehouses ({this.props.warehouseCount}): 
        </div> 
        <div className="col-sm-10"> 
         <WarehouseMenu warehouseList={this.props.warehouses} /> 
        </div> 
       </div> 
       <div className="col-lg-12"> 
        <WarehouseView test={this.props.isSelected} selectedWarehouse={this.props.selectedWarehouse} /> 
       </div> 
       <div className="col-lg-12"> 
        <WarehouseEdit /> 
       </div> 
      </div> 
     ) 
    } 

} 

そして、これらは、子どもたちsource on gitです：

import React from "react" 
import store from "../../store" 
import {fetchOne} from "../../actions/warehouseActions" 

export default class WarehouseMenu extends React.Component { 

constructor(props) { 
    super(props) 
} 

select(id) { 
    store.dispatch(fetchOne(id)) 
} 

render() { 
    const {warehouseList} = this.props.warehouseList 

    if (!warehouseList) { 
     return <button className="btn btn-success" key="new_warehouse">+</button> 
    } 

    const mappedWarehouses = warehouseList.map(wh => <button onClick={this.select.bind(this, wh.id)} className="btn btn-default" key={wh.id}>{wh.name}</button>) 
    mappedWarehouses.push(<button className="btn btn-success" key="new_warehouse">+</button>) 
    return (
     <div className="btn-group"> 
      {mappedWarehouses} 
     </div> 
    ) 
} 

}

そしてsource on git：

import React from "react" 
import store from "../../store" 
import {deleteWarehouse, fetchWarehouses} from "../../actions/warehouseActions" 

export default class WarehouseView extends React.Component { 

    constructor(props) { 
     super(props) 
    } 

    render() { 
     const {test, selectedWarehouse} = this.props 

     if (!test) { 
      return null 
     } 

     return (
      <div className="container-fluid"> 
       <div className="row"> 
        <div className="col-sm-2"> 
         ID 
        </div> 
        <div className="col-sm-10"> 
         {selectedWarehouse.id} 
        </div> 
       </div> 
       <div className="row"> 
        <div className="col-sm-2"> 
         Name 
        </div> 
        <div className="col-sm-10"> 
         {selectedWarehouse.name} 
        </div> 
       </div> 
       <div className="row"> 
        <div className="col-sm-12"> 
         <button className="btn btn-warning">EDIT</button> 
         <button onClick={this.deleteWarehouse.bind(this, selectedWarehouse.id)} className="btn btn-danger">DELETE</button> 
        </div> 
       </div> 
      </div> 
     ) 
    } 

    deleteWarehouse(id) { 
     store.dispatch(deleteWarehouse(id)) 
    } 

} 

したがって、deleteWarehouseを発送するときは、の状態が変更されたので、WarehouseMenuを再レンダリングします。期待した結果が得られません。 WarehousePage再レンダリングのみ（例：store.warehouses.warehouseCount）。私は子コンポーネントに@connect intストアを試しましたが、望みの結果も得られなかったようです。

Answer 1

あなたのwarehouseReducers.jsときの内側warehousesプロパティをalterningされていませんDELETE_WAREHOUSE_FULFILLEDアクションはディスパッチされますが、変更してください。warehouseCount

Answer 2

あなたの削除アクション：

export function deleteWarehouse(id) { 
    return function (dispatch) { 
     axios.delete(`/api/sandy/api/warehouses/${id}`) 
      .then((response) => { 
       dispatch({ 
        type: "DELETE_WAREHOUSE_FULFILLED", 
        payload: null 
       }) 
      }) 
      .catch((err) => { 
      }) 
    } 
} 

はwarehouseReducers.jsでstate.warehouses配列から削除された倉庫を削除するために状態を更新することはありません：

case "DELETE_WAREHOUSE_FULFILLED": { 
    return {...state, 
     selectedWarehouse: null, 
     isSelected: false, 
     warehouseCount: state.warehouseCount - 1 
    } 
}