Reactjs 使用redux从无关组件传递状态？

这里有我的顶级组件

App

，它呈现我的

标题
组件和我的
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);

像这样：


在我的
FrontPage
组件中，我有一个
AddToCartBtn
，当它被单击时，将在MongoDB中更新用户的购物车

事件的流程如下所示：

用户单击产品上的
AddToCartBtn
AddToCartBtn
发出POST请求以更新MongoDB中的用户文档（将productID添加到他们的“购物车”）
ShoppingCart
应重新呈现并显示新编号
我的问题：当我刷新页面时，显示的金额只会更新。我想在步骤2之后立即重新渲染

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

问题：我将如何实现步骤3。通过使用redux或任何其他方法？我是redux新手，所以如果您能向我展示它的实现，那就太好了

注意：假设
ShoppingCart
是从
标题
组件向下的几层，并且假设
AddToCartBtn
是从
FrontPage
组件向下的几层。因此，将状态/数据从子组件向上传递（向上传递几层），然后作为道具向下传递到另一个组件不是很吸引人。
好吧，我假设您了解有关还原器、操作以及将组件连接到存储的基本知识。我们还假设您正在商店中存储用户的购物车信息

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

在数据库中更新用户的购物车
获取用户的新购物车值
如果您只使用1db查询就可以做到这一点，尽管您可能需要2个。然后，当您拥有此信息时，您会在路由的响应中返回它。然后，reducer将使用从后端返回的新值更新存储中用户的购物车信息。这是更新商店中用户购物车信息的基本流程

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

因此本质上：将用户购物车信息存储在Redux状态，并将您的购物车组件连接到它（具体地说，是项目数量）。单击项目时，调用其reducer将发布到后端路由的操作。此路由更新用户信息并返回新购物车数据。Reducer然后用新数据覆盖当前状态数据，触发连接组件（即购物车图标）的更新。
目前，您的购物车组件在安装时仅获取购物车中的项目数。因此，当你第一次挂载它（比如打开或刷新页面）时，它将得到正确的数量。但是，当有人添加产品时，用新数量的商品更新商店的逻辑在哪里？将购物车连接到商店价值的逻辑在哪里？这是我的问题，我将如何使用redux实现这一点？基本上，我希望在
AddToCartBtn
完成post请求后，向我的redux商店发送一条状态信息，然后
ShoppingCart
将收到道具。你有后端吗？或者您只是将前端直接连接到数据库？是的，我有一个NodeJS后端，
AddToCartBtn
向我的NodeJS路由发出post请求，以更新mongodb用户。很好的解释，我将尝试实现它
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 });
    }
  }

  //...
}