Reactjs Redux:在存储状态更新时重新呈现子级

最近我开始学习

react

+

redux

。在此之前，我还没有使用这种堆栈的经验。 所以我遇到了一个问题，我不明白为什么当reducer返回新状态时，子组件不会被重新渲染。

这是我的父组件：

从“React”导入React
从“react redux”导入{connect}
从“../../actions/warehouseActions”导入{fetchWarehouses}
从“/WarehouseMenu”导入仓库菜单
从“/WarehouseView”导入WarehouseView
从“/WarehouseEdit”导入WarehouseEdit
@连接（（存储）=>{
返回{
仓库：仓库，仓库，仓库，
selectedWarehouse:store.warehouses.selectedWarehouse，
isSelected:store.warehouses.isSelected，
warehouseCount:store.warehouses.warehouseCount，
}
})
导出默认类WarehousePage扩展React.Component{
组件willmount（）{
this.props.dispatch（fetchWarehouses（））
}
render（）{
返回(
仓库（{this.props.warehouseCount}）：
)
}
}

这些是孩子们：

从“React”导入React
从“../../store”导入存储
从“../../actions/warehouseActions”导入{fetchOne}
导出默认类Warehouse菜单扩展React.Component{
建造师（道具）{
超级（道具）
}
选择（id）{
存储调度（fetchOne（id））
}
render（）{
const{warehouseList}=this.props.warehouseList
如果（！仓库列表）{
返回+
}
const mappedWarehouses=warehouseList.map（wh=>{wh.name}）
mapped.push（+）
返回(
{mappeddowers}
)
}

}

以及：

从“React”导入React
从“../../store”导入存储
从“./../actions/warehouseActions”导入{deleteWarehouse，fetchWarehouses}
导出默认类WarehouseView扩展React.Component{
建造师（道具）{
超级（道具）
}
render（）{
const{test，selectedWarehouse}=this.props
如果（！测试）{
返回空
}
返回(
身份证件
{selectedWarehouse.id}
名称
{selectedWarehouse.name}
编辑
删除
)
}
删除仓库（id）{
仓库调度（删除仓库（id））
}
}

因此，每当我分派

deletehouse

时，我都希望

warehouse菜单

重新提交，因为

store.warehouse.warehouses

的状态发生了变化。我没有得到预期的结果。仅

WarehousePage

Reenders（例如

store.warehouses.warehouseCount

）。我已尝试将

@connect

int-store连接到子组件，但似乎也没有得到所需的结果。

您的删除操作：

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

调度
DELETE\u WAREHOUSE\u completed
操作时，您没有更改
WAREHOUSE
reducers.js中的
WAREHOUSE
属性，但您确实更改了
warehouseCount

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

}

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

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