使用redux从不相关的组件传递状态？

Question

在这里，我有顶层组件App，它会呈现我的Header组件和我的FrontPage组件。我也有react-redux连线检查用户是否已登录。

import React, { Component } from "react";
import { BrowserRouter, Route } from "react-router-dom";
import { connect } from "react-redux";
import * as actions from "../actions";

//Header Container
import Header from "../Containers/Header";

//Front Page Container
import FrontPage from "../Containers/FrontPage";

class App extends Component {
  componentDidMount() {
    this.props.fetchUser();
  }

  render() {
    return (
      <div>
        <BrowserRouter>
          <div>
            <Header />
            <Route path="/" exact component={FrontPage} />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

export default connect(null, actions)(App);

在我的Header组件中，我有一个ShoppingCart组件，显示用户在购物车中的商品数量。

class ShoppingCart extends Component {
  constructor(props) {
    super(props);

    this.state = { itemAmount: "0" };
  }

  async componentDidMount() {
    const item = await axios.post("/api/items-in-cart-amount");

    if (item.data) {
      this.setState({ itemAmount: item.data.amount });
    }
  }

  //...
}

像这样：

在我的FrontPage组件中，我有AddToCartBtn，点击后会更新MongoDB中的用户购物车

事件流程如下：

1. 用户点击产品上的AddToCartBtn
2. AddToCartBtn发出POST请求以更新MongoDB中的用户文档（将productID添加到他们的＆＃34;购物车＆＃34;）
3. ShoppingCart 应该重新呈现并显示新号码

我的问题：当我刷新页面时，显示的金额只会更新。我想在第2步之后重新渲染。

我知道ShoppingCart没有被重新渲染，因为它的状态没有改变。

问题：如何使用redux或任何其他方法实现第3步？我是redux的新手，所以如果你能告诉我它的实现，那就太棒了。

注意：假设ShoppingCart是Header组件的几层，并假设AddToCartBtn是FrontPage组件的几层。所以从孩子那里传递状态/数据（几层向上），然后作为道具返回到另一个组件并不是很有吸引力。

Answer 1

好的，我将假设您了解有关减速器，操作以及将组件连接到商店的基础知识。我们还假设您在商店中存储了用户的购物车信息。

基本上你有类似UPDATE_USER_CART动作的东西。点击产品后，它不会发布到后端本身，它会调用此操作。在实现此操作的reducer中，您将发布到后端节点路由，例如/updateusercart。现在我还没有使用MongoDB，所以我不太确定你如何实现这一点，但基本上在这条路线中你需要做两件事：

1. 更新数据库中的用户购物车
2. 获取用户的新购物车价值

如果你只使用1个DB查询就可以做到这一点，虽然你可能需要2.然后当你有这些信息时，你会在路由的回复中返回它。然后，reducer将使用从您的后端返回的新值更新商店中用户的购物车信息。这是更新商店中用户购物车信息的基本流程。

第二部分是将您的购物车连接到商店，因此在您的mapStateToProps功能中，您可以在商店中添加购物车商品的数量。现在计数已映射到商店，当您使用新的用户购物车信息更新商店时，购物车图标将作为道具传递新项目计数并获得更新。

因此，实质上：将用户购物车信息存储在Redux状态，并将购物车组件连接到它（具体来说，项目数量）。单击某个项目时，调用其reducer发布到后端路由的操作。此路线更新用户信息并返回新的购物车数据。然后Reducer用这个新数据覆盖当前状态数据，触发连接组件的更新（即购物车图标）。