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

Question

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

页眉组件有 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 动作放入 props

所以在 child 上，您想调用一个将通过 mapDispatchToProps

更新商店的操作

然后在 parent 上你想使用 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/

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

React/Redux - Update state in parent component from child component

javascript

reactjs

redux

redux-saga