Javascript React/Redux从组件对存储的简单访问

我试图弄清楚如何使用React组件中的减速器。 我的目标很简单——至少我这么认为：我想切换抽屉菜单。我知道我只能用React解决这个问题，但我想学习Redux

所以，我有一个组件

import React，{Component}来自'React'；
类示例扩展组件{
// ???
render（）{
返回(
{
开关（动作类型）{
“切换”案例：
返回Object.assign（{}，state{
buttonstate:！state.buttonstate
})
违约：
返回状态
}
}
导出默认示例

还有一个动作（虽然我不知道该放在哪里，因为它太简单了）

export const toggleDrawer=（）=>{
返回{
类型：“切换抽屉”
}
}

我读了很多教程，其中大多数都希望我将“表示组件”和“容器组件”分开。我真的看不出这些概念在这里是如何应用的。 那么，我必须做些什么才能使这项工作发挥作用呢？我是从正确的角度看待这个问题，还是需要12个“容器组件”来解决这个问题

---

---

我真的希望这个问题是有意义的，或者不是重复的！

在redux中，您必须调度操作以更新reducer状态。因此，通常情况下，组件连接到redux存储，并通过调度完成通信

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { toggleDrawer } from 'action file location';

class Example extends Component {

   toggleDrawerHandler() {
     this.props.dispatch(toggleDrawer())
   }


  render() {
    // access button state from this.props.buttonstate
    return (
        <button className="burgerbutton" onClick={this.toggleDrawerHandler.bind(this)}</button>
        <div className="drawerMenu isvisible" ></div>
    );
  }
}

export default connect((store) => {buttonstate: store.buttonstate})(Example);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“操作文件位置”导入{toggleDrawer}；
类示例扩展组件{
toggleDrawerHandler（）{
this.props.dispatch（toggleDrawer（））
}
render（）{
//从this.props.buttonstate访问按钮状态
返回(
{buttonstate:store.buttonstate}（示例）；

在redux中，您必须调度操作以更新reducer状态。因此，通常情况下，组件连接到redux存储，并通过调度完成通信

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { toggleDrawer } from 'action file location';

class Example extends Component {

   toggleDrawerHandler() {
     this.props.dispatch(toggleDrawer())
   }


  render() {
    // access button state from this.props.buttonstate
    return (
        <button className="burgerbutton" onClick={this.toggleDrawerHandler.bind(this)}</button>
        <div className="drawerMenu isvisible" ></div>
    );
  }
}

export default connect((store) => {buttonstate: store.buttonstate})(Example);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“操作文件位置”导入{toggleDrawer}；
类示例扩展组件{
toggleDrawerHandler（）{
this.props.dispatch（toggleDrawer（））
}
render（）{
//从this.props.buttonstate访问按钮状态
返回(
{buttonstate:store.buttonstate}（示例）；

首先，我非常喜欢使用它，它基本上是一个redux reducer包。您可以将reducer、动作常量和动作创建者放在一个文件（称为duck）中。然后，对于不同的模块或状态片段，您可以使用多个duck，然后再与combinereducer组合

虽然@duwalanise的想法是正确的，但我宁愿使用

connect（）

的第二个参数直接映射要分派的操作（这有一个很好的快捷方式），而不必使用

this.props.dispatch

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { toggleDrawer } from './duck';

class Example extends Component {

  render() {
    const { buttonstate, togglerDrawer } = this.props;
    return (
      <div>
        <button className="burgerbutton" onClick={toggleDrawer}</button>
        <div className="drawerMenu isvisible" ></div>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
    buttonstate: state.buttonstate,
});

export default connect(mapStateToProps, { toggleDrawer })(Example);

---

首先，我非常喜欢使用它，它基本上是一个redux reducer包。你把你的reducer、action常量和action creators放在一个文件中（称为duck）。然后你可能会有多个duck用于不同的模块或状态片段，然后你会与combinereducer组合

虽然@duwalanise的想法是正确的，但我宁愿使用

connect（）

的第二个参数直接映射要分派的操作（这有一个很好的快捷方式），而不必使用

this.props.dispatch

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { toggleDrawer } from './duck';

class Example extends Component {

  render() {
    const { buttonstate, togglerDrawer } = this.props;
    return (
      <div>
        <button className="burgerbutton" onClick={toggleDrawer}</button>
        <div className="drawerMenu isvisible" ></div>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
    buttonstate: state.buttonstate,
});

export default connect(mapStateToProps, { toggleDrawer })(Example);