用于全局访问状态的 React-redux

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 存储访问该状态。并使用此代码更改用户界面。{this.props.branding && <div className="tickicon">O</div>}

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

Answer 1

您的initialState 是一个对象，而您像!state (?) 一样使用它。

另外，在switch 情况下，您不需要在return 之后使用break。

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,} 没用