React-redux for accessing the state globally

1
votes

This component toggle the state to true and false on each click.

const mapStateToProps = state => {
    return {
        branding:state.brand
    }
}

const mapDispatchToProps = {
    clickEvent:toggleState
}
class Files extends React.Component {
    constructor(props) {
        super (props)

        this.state = {
            brand: false,
        }
        

    }

    
    render(){
        return (
            <div className="bodywrapper">
                <div className="projectcontainer">
                    <div className="textcontainer">
                        <div className="textheader">Files you have</div>
                    </div>
                    <div className="bodycontainer">
                        <button 
                            className="filebutton"
                            onClick = {this.props.clickEvent}
                            name = "brand"> 
                            Brand Guide
                            {this.props.branding && <div className="tickicon">O</div>}
                        </button>
                        <div className="filebutton"> Content</div>

                    </div>
                    <div className="buttoncontainer">
                        <div className="bottontext"><a href="filesneeded.html">Next step</a> </div>
                    </div>
                </div>
                <div className="sliderwrapper">
                    <div className="slide"></div>
                    <div className="slide"></div>

                    <div className="slide"></div>
                    <div className="slide"></div>

                    <div className="slide"></div>
                </div>
            </div>
        )
    }

    
}

    export default connect(mapStateToProps,mapDispatchToProps)(Files)

Here I used Redux for accessing the state globally. MapDispatchToProps trigger the action of toggleState.

import { TOGGLE } from '../Redux/constants.js'
export const toggleState =()=> ({
    type:TOGGLE,
})

And reducer return the opposite of state on each click

import { TOGGLE } from '../Redux/constants'

const initialState = {
    brand:false
}

export const toggleStater = (state = initialState,action = {}) => {
    switch (action.type) {
        case TOGGLE:
            return !state
            break;
    
        default:
            return state
            break;
    }
}

and i access that state from Redux store using the MSTP like this.props.branding. And change the ui using this code.{this.props.branding && <div className="tickicon">O</div>}

Unfortunately this code is note working. someone please share the mistake.

2
reactjsreduxstate
typo: {brand: !state.brand - Joseph D.

2 Answers

0
votes

Your reducer doesn't seem to be valid, (state is an object so return !state will not work) you should write :

export const toggleStater = (state = initialState,action = {}) => {
  switch (action.type) {
    case TOGGLE:
        return {
          ...state, 
          brand: !state.brand
        }
    default:
        return state
  }
}

you can also remove the state declaration from your component : this.state = {brand: false,} is useless

1
votes

Your initialState is an object while you using it like !state (?).

Also, you don't need break after return in switch cases.

const initialState = {
  brand: false,
};

export const toggleStater = (state = initialState, action = {}) => {
  switch (action.type) {
    case TOGGLE:
      return { ...state, brand: !state.brand };

    default:
      return state;
  }
};