React/Redux - 从子组件更新父组件中的状态

Question

我有 2 个组件： Header 和 Child 在一个已经开发的使用redux-saga react应用程序中。

Header 组件有 2 个 material-ui 选择组件。 现在，当我路由到子组件时，我想通过更新其状态来禁用 Header 中的这两个 Select 组件。

App.js

const App = ({ store }) => {
  return (
    <ThemeProvider theme={theme}>
      <Provider store={store}>
        <Header />
        <Router />
        <Footer />
      </Provider>
    </ThemeProvider>
  );
};

Router.js

<Route
        exact
        path={`${url}BatchFileRawDataDashboard`}
        component={Child}
      />

Header.js

<Select
  style={{ width: 112 }}
  value={this.state.selectedCycle}
  autoWidth={true}
  disabled={this.disableCycle.bind(this)}
 >
 {cycleDateItem}
 </Select>

Header 组件没有道具，我对mapStateToProps和mapDispatchToProps工作方式感到非常困惑。

如何从使用redux子组件更新父组件的状态？

Answer 1

mapStateToProps = 将 redux 存储状态放入 props

mapDispatchToProps = 将 redux 操作放入道具中

所以在孩子上，你想调用一个动作来通过 mapDispatchToProps 更新商店

然后在你想使用 mapStateToProps 来读取这个更新后的值的父

 // PARENT READ DATA const mapStateToProps = (store) => ({ parentData: store.parentData, }) // CHILD ACTION TO UPDATE STORE // the function here triggers a action which triggers a reducer const mapDispatchToProps = dispatch => ({ updateParentAction: data => dispatch(some_action_name(data)), })

我建议阅读 redux 是如何工作的，一旦你明白它很简单，但从https://www.valentinog.com/blog/redux/开始就很复杂