CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Niall Maher
Niall Maher

Reputation: 365

Trying to connect react to redux

I've been playing with React for a while and trying to avoid the headache of Redux as long as I possibly could. Now I am working on a project which uses Redux and need help.

I've for sidebar to open and close as I thought it would be an easy task but here's the mess I have made:

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;
};

I'm getting an error saying "visible" is not defined but I have no idea where I am tripping!

Any guidance would be appreciated, this Redux thing looks useful if I could use it :-P

Upvotes: 0

Views: 62

Answers (1)

Michael Rose
Michael Rose

Reputation: 7820

First of all the error you are getting is probably from here:

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

There is no visible variable in this scope - did you intend to make it a parameter? The best solution would be to only have the toggle logic inside your reducer (as you already have). Therefore rewrite the action as:

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

And the reducer:

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

Furthermore you should modify your connect call and pass a second function to map dispatch to props:

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

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

export default connect(mapStateToProps)(MenuSide);

Then modify the handleClick():

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

Upvotes: 2

Related Questions