Redux：重新渲染兒童商店狀態更新

最近我開始學習react + redux。在此之前，我還沒有這種堆棧的經驗。所以我遇到了一個問題，我不明白爲什麼在Reducer返回新狀態時子組件不會重新呈現。 Full code on GITHUB Redux：重新渲染兒童商店狀態更新

這是我的父組件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自store.warehouses.warehouses狀態更改以來重新放棄。我沒有得到預期的結果。只有WarehousePage退保（例如store.warehouses.warehouseCount）。我已經嘗試@connect INT存儲到子組件，但似乎也沒有得到所需的結果。

來源

2016-11-15 Xeperis

你是不是alterning裏面你warehouseReducers.js當該warehouses屬性DELETE_WAREHOUSE_FULFILLED行動已發出，但您確實更改了warehouseCount

來源

2016-11-15 13:48:31

你的刪除操作：

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) => { 
      }) 
    } 
}

永遠不會更新狀態從state.warehouses陣列warehouseReducers.js刪除已刪除的倉庫：

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

來源

2016-11-15 13:47:10 DTing

Redux：重新渲染兒童商店狀態更新

回答

相關問題