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

Question

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

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

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 组件没有 props，我对 mapStateToProps 和 mapDispatchToProps 的工作原理感到非常困惑。

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

Answer 1

mapStateToProps = 将 redux 存储状态放入 props

mapDispatchToProps = 将 redux 操作放入 props

因此，在子项上，您想要调用一个操作来通过 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/ 开始就很复杂了