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

Question

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

Header组件具有2个material-ui Select组件。现在，当我路由到子组件时，我想通过更新其状态来禁用Header中的2 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/开始就很复杂>