根据子组件的更改更新 Redux Store

Question

我是 React 和学习 Redux 的新手。我有一个包含两个子组件的容器组件。在其中一个子组件（标题组件）中，我有五个按钮。它的同级组件（Body 组件）根据在 Header 组件中单击的按钮呈现不同的视图。我知道我可以通过保持父组件中的状态并拥有一个事件处理函数来实现这一点，该函数在单击按钮时接收回调函数，但我正在尝试为更复杂的应用程序学习 Redux。

为了实现这一点，我在 Parent 组件中引入了一个处理函数，它根据从传递给 Header 组件的回调函数接收到的数据调度一个动作，以更改存储，从而从 Body 组件呈现适当的视图。

这是代码示例：

父组件：

...

const mapStateToProps = state => {

  return {

    selectedDS: state.selectedDS

  };

};

const mapDispatchToProps = dispatch => ({

  changeDs: selectedDS => dispatch(changeDs(selectedDS)),

  dispatch

});

class Main extends Component {

  handleClick = button => {

    this.props.dispatch(changeDs(button));

  };

  render() {

    return (

      <>

        <div className="container">

          <div id="header" className="row">

            <Header handleClick={this.handleClick} />

          </div>

          <div className="row">

            <DsComponent ds={this.props} />

          </div>

        </div>

      </>

    );

  }

}

export default connect(

  mapStateToProps,

  mapDispatchToProps

)(Main);

我的问题是：

• 代码有什么问题？

• 如果我希望组件成为哑组件，那么在组件树中更深入地调度操作的最佳方法是什么？

Answer 1

问题 ：是你的reducer，你设置了错误的商店价值，你正在设置商店价值var payload_ds = action.payload;return Object.assign({}, state, { payload_ds });// above line create json object something like this// { selectedDS: 0 , payload_ds: { selectedDS: 4 } }解决方案 ：var payload_ds = action.payload.selectedDS;return Object.assign({}, state, { selectedDS: payload_ds }); // <----- HERE// OR// as there is only one field you can also use this onereturn { selectedDS: payload_ds }问：如果我希望组件成为哑组件，那么在组件树中更深入地调度操作的最佳方法是什么？A ：您可以mapDispatchToProps在将所有内容作为道具传递时使用它仍然被视为愚蠢的组件。