Question

该组件在每次点击时将状态切换为true和false。

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)

在这里，我使用Redux全局访问状态。 MapDispatchToProps触发toggleState的动作。

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

Reducer每次单击都会返回相反的状态

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

并且我使用this.props.branding之类的MSTP从Redux存储访问该状态。并使用此代码更改ui。{this.props.branding && <div className="tickicon">O</div>}

不幸的是，这段代码可以正常工作。有人请分享错误。

Answer 1

您的initialState是对象，而您像!state（？）那样使用它。

此外，在break情况下，return之后不需要switch。

const initialState = {
  brand: false,
};

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

    default:
      return state;
  }
};

Answer 2

您的reducer似乎无效，（state是一个对象，因此return !state将不起作用），您应该编写：

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

您还可以从组件中删除状态声明：this.state = {brand: false,}没有用

反应redux以全局访问状态

2 个答案: