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

Question

好的，所以我在进行反应编程时遇到了一个问题，我发现这是一个常见的问题。 如果我有多个嵌套组件，那么我有：

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

然后在<ViewHandler/>我还有其他愚蠢的呈现组件，它们也具有嵌套组件。 如果我在<ViewHandler>中一个深层嵌套的组件中有一个按钮，并且我想通过更改我所在组件上方的许多父组件来响应该按钮的onClick，我该怎么做？ 就我而言，我将对在该深层嵌套的组件中单击按钮做出反应，然后我想更改<Navigation>上的选定选项卡。 我不想将一堆回调函数作为属性传递下来，因为那感觉非常苏格兰式。

我学习了redux，因为我读到它解决了这个问题。 但是对我来说还没有。 我使用react-redux的<Provider>授予<AppView>对我的redux存储的访问权限，并且我可以通过props（ props.currentTab ）访问该存储。 但是对于<AppView>嵌套的所有组件，它们无权访问商店或我的任何动作创建者。 如何从深层嵌套的组件中修改我的商店，以便我可以更改父组件而无需传递大量回调函数？ 还是这只是不正确的架构？ 我以为redux可以解决这个问题，但事实并非如此。

是的，我已经连接了我的组件。 我只是不喜欢将store.state信息作为道具传递的想法，因为它在许多嵌套组件中变得非常多余。

Answer 1

我不知道您为什么认为必须在组件树中一直发送道具。 这就是connect和mapStateToProps帮助您避免的事情：它们使您可以将应用程序状态的mapStateToProps位仅变为需要它的组件的props。

在按钮的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>组件的render功能中，您根据应用状态的当前值决定显示哪个选项卡：

// Navigation.js

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

通过connect和mapStateToProps访问该状态：

// Navigation.js still

const mapStateToProps = (appState) => {
  return {
    selectedTab: appState.selectedTab
  };
};

export default connect(mapStateToProps)(Navigation);

Answer 2

Hoc（高阶组件）是为子组件提供方法和数据的包装器，通常使用它是一个好主意，但它会强制执行某些“纪律”。

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

因为这样做会带来意大利面条，所以每次您单击该按钮时，并假设绑定到它的方法都会弄乱状态（内部或商店本身），它将重新呈现所有4个级别，可以通过使用来避免这种情况。该shouldComponentUpdate()但这是太多的工作，没有任何用处。

因此解决方案是将每个组件与mapStateToProps和mapDispatchToProps连接，对吗？

很好，实际上，在广泛使用react和redux之后，您会注意到，对于每个组件，在大小，子项以及应放置的内容和不应该放置的内容方面都有一个不错的选择。

示例：您可以在窗体中控制发送机制的按钮，而无需为该按钮制作组件，这将增加复杂性而没有任何好处。 只需将其放在表单组件上，即可使用。

如果您确实需要在深层嵌套的组件和HOC之间调用操作或传递道具，请在组件级别使用connect模块（对于您的情况为按钮），但不要太多，因为这会使您的组件变重（加载和装载）。显示）。以下是一些提示，以帮助您：

• 使用mapStateToProps时，您需要尽可能地具体，不要返回整个商店，只需返回所需的数据，与mapDispatchToprops相同，只需绑定将不使用其他方法的方法即可。

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

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

• 如果您要编写一个带有大量化简器和状态的大型应用程序，请考虑使用选择器和一些库，例如重新选择。

我知道这不是您期望的答案，但是遵循此指南将为您节省大量的重构时间。

希望能帮助到你