尝试连接对 redux 的反应

Question

我已经使用 React 一段时间了，并尽可能地避免 Redux 带来的麻烦。现在我正在做一个使用 Redux 的项目，需要帮助。

我希望侧边栏可以打开和关闭，因为我认为这是一项简单的任务，但这是我造成的混乱：

MenuSide.js

import React from 'react';
import { connect } from 'react-redux';
import './MenuSide.scss';
import data from './MenuData';

import toggleVisibility from './MenuSideActions';

import Accordion from '../Accordion/Accordion';

class MenuSide extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      visible: true
    };
    this.handleClick = this.handleClick.bind(this);

  }

  handleClick() {
      this.props.dispatch(toggleVisibility());
  }

  render() {
    return (
      <div className="sidebar-container">

        <div className={this.props.visible ? 'sidebar large-3 columns' : 'hide' }>
          <div className={this.props.visible ? 'button-open' : 'hide'} onClick={() => {
            this.handleClick()
          }}>

          </div>
          <div className="sidebar-header">
            <h3 className="id-header-text">8374995867</h3>
            { /*optional message*/ }
            { data.messsage ? <h5>data.message</h5> : "" }
          </div>
          <Accordion/>
        </div>
        <div onClick={() => {
          this.handleClick()
        }} className={!this.props.visible ? 'open-side-menu-button' : 'hide' }></div>
      </div>

    );

  }

}

MenuSide.propTypes = {};

const mapStateToProps = (state) => {
  return {
    visible: state.visible
  }
};



export default connect(mapStateToProps)(MenuSide);

MenuSideActions.js

export default function toggleVisibility () {
  return {type: "TOGGLE_VISIBILITY", visible: visible}
}

MenuSideReducer.js

const DEFAULT_STATE = {
  visible: true
};

const toggleVisibility  = (state, action) => {
  return Object.assign({}, state, {visible: !action.visible});
};

export default (state = DEFAULT_STATE, action) => {
  switch(action.type){
    case "TOGGLE_VISIBILITY": {
      return toggleVisibility(state, action);
    }
  }
  return state;
};

我收到一条错误消息，提示 "visible" 未定义，但我不知道我在哪里绊倒了！

任何指导将不胜感激，如果我可以使用它，这个 Redux 东西看起来很有用:-P

Answer 1

首先，您遇到的错误可能来自这里：

export default function toggleVisibility () {
  return {type: "TOGGLE_VISIBILITY", visible: visible} // <<<---
}

此范围内没有 visible 变量 - 您是否打算将其作为参数？最好的解决方案是在你的 reducer 中只包含切换逻辑（就像你已经拥有的那样）。因此将动作重写为：

export default function toggleVisibility () {
  return {type: "TOGGLE_VISIBILITY"}
}

和减速器：

const toggleVisibility  = (state, action) => {
  return Object.assign({}, state, {visible: !state.visible});
};

此外，您应该修改连接调用并传递第二个函数以将 dispatch 映射到道具：

const mapStateToProps = (state) => {
  return {
    visible: state.visible
  }
};

const mapDispatchToProps = (dispatch) => {
    return {
        toggle: () => {
            dispatch(toggleVisibility());
        }
    }
}

export default connect(mapStateToProps)(MenuSide);

然后修改handleClick()：

handleClick() {
    this.props.toggle();
}

尝试连接对 redux 的反应

Trying to connect react to redux

javascript

reactjs

redux

react-redux