Javascript react，redux-使用redux修改父组件

我在react中编程时遇到了一个问题，我发现这是一个常见的问题。如果我有多个嵌套组件，在我的情况下，我有：

<AppView>
  <Navigation/> // this is a navbar
  <ViewHandler currentTab={props.currentTab}/>
  <Footer/>
</AppView>

然后在中，我有其他哑的表示组件，它们也有嵌套组件。如果我在中的一个嵌套很深的组件中有一个按钮，并且我想通过在我所在的组件上更改许多父组件来响应该按钮的onClick，我将如何做？在我的例子中，我会对在深度嵌套的组件中单击的按钮做出反应，然后我想更改上选定的选项卡。我不想把一堆回调函数作为属性传递下去，因为这让人觉得很无聊

我学习redux是因为我读到它解决了这个问题。但对我来说没有。我正在使用react redux访问我的redux商店，我可以通过props props.currentTab访问商店。但是对于嵌套在其中的所有组件，它们都无权访问存储区或任何my action创建者。如何从深度嵌套的组件中修改我的存储，以便在不向下传递大量回调函数的情况下更改父组件？或者这只是不正确的架构？我以为redux可以解决这个问题，但它没有

---

是的，我已经连接了我的组件。我只是不喜欢将store.state信息作为道具传递下去，因为它与许多嵌套组件非常冗余。

Hoc higher order components是一个包装器，它为子组件提供方法和数据，通常使用它是一个好主意，但它强制执行一些“规程”

示例：如果您的HOC处于级别0，并且您在级别4有一个深度嵌套的按钮组件，该组件在同一个HOC中调用一个方法，您应该怎么做？将其传递到所有4个级别？答案是不行

因为这样做会带来意大利面，每次你点击这个按钮，假设绑定到它的方法会破坏内部状态或存储本身，它会重新渲染所有4个级别，你可以通过使用shouldComponentUpdate来避免这一点，但这太多的工作毫无用处

所以解决方案是用mapStateToProps和mapDispatchToProps连接每个组件，对吗

事实上，在广泛使用react和redux之后，你会注意到，对于每个组件，在大小、儿童、应该放什么和不应该放什么方面都有一个最佳点

示例：在控制发送机制的表单中有一个按钮，不需要为该按钮制作组件，它会增加复杂性而没有任何好处。只要把它放在表单组件上，就可以使用它们了

如果您真的需要在嵌套较深的组件和HOC之间调用操作或传递道具，请在组件级别使用“连接”模块（用于您的案例）按钮，但不要太多，因为这会使您的组件更难以加载和显示。以下是一些帮助提示：

使用mapStateToProps时，您需要尽可能具体，不要返回整个存储，只返回所需的数据片段，与mapDispatchToprops相同，只需绑定您将不使用其他内容的方法

在您的情况下，按钮不必知道选择了哪个选项卡，因此mapDispatchToProps就足够了

避免深度嵌套处理某种逻辑的组件，重构您的结构或为该组件创建一个HOC，相反，无逻辑的组件可以深度嵌套

如果你编写了一个带有很多还原器和状态的大应用程序，考虑使用选择器，以及一些像ReCase5.0/P>这样的库。 我知道这不是您期望的答案，但遵循这条准则将为您节省无数的重构时间

---

希望它能有所帮助

我不知道你为什么认为你必须在组件树上发送道具。这就是connect和MapStateTrops帮助您避免的：它们让您将应用程序状态的一部分转化为道具，只用于需要它的组件

在按钮的onClick处理程序中，创建并分派Redux操作：

// button.js

onClick={() => {
  dispatch({
    payload: 1 // or whatever value
    type: 'SET_SELECTED_TAB'
  });
}}

接下来，让reducer函数监视此操作并修改一点Redux应用程序状态：

// reducer.js

if (action.type === 'SET_SELECTED_TAB') {
  return {
    ...currentAppState,
    selectedTab: action.payload
  };
}

// Navigation.js

render() {
  return (
    <div>
      current tab: {this.props.selectedTab}
    </div>
  );
}

最后，在组件的render函数中，您可以根据应用程序状态的当前值来决定显示哪个选项卡：

// reducer.js

if (action.type === 'SET_SELECTED_TAB') {
  return {
    ...currentAppState,
    selectedTab: action.payload
  };
}

// Navigation.js

render() {
  return (
    <div>
      current tab: {this.props.selectedTab}
    </div>
  );
}

---

您没有正确使用redux。所选选项卡应来自store.state。它应该使用传递给它的属性。单击按钮时，应更新存储状态以反映所选选项卡。听起来您还需要连接组件。只是用提供者包装它，并不像您所想的那样给它访问权限。请添加我们为您的商店、组件和操作编写的代码，以便我们提供帮助，好吗？@NormCrandall我正在使用connect so t

---

我可以通过Propst访问currentTab，非常感谢。这正是我要找的。我怎样才能访问dispatch@Dan O