Question

我最近开始学习react + redux。在此之前，我没有这种堆栈的经验。所以我遇到了一个问题，我不明白为什么当reducer返回新状态时子组件不会被重新渲染。 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重新呈现，因为store.warehouses.warehouses的状态发生了变化。我没有得到预期的结果。仅WarehousePage重新呈现（例如store.warehouses.warehouseCount）。我已经尝试将@connect int store存储到子组件中，但似乎也没有获得所需的结果。

Answer 1

您的删除操作：

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

Answer 2

当您发送warehouses操作时，您warehouseReducers.js内的DELETE_WAREHOUSE_FULFILLED属性并未交替，但您确实更改了warehouseCount

Redux：在商店状态更新

2 个答案: