时间戳

首页 > 解决方案 > 用于全局访问状态的 React-redux

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

问题描述

此组件在每次单击时将状态切换为 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;
    }
}

我使用 MSTP 从 Redux 存储访问该状态，例如this.props.branding. 并使用此代码更改用户界面。{this.props.branding && <div className="tickicon">O</div>}

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

标签： reactjsreduxstate

解决方案

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

此外，您不需要breakafter returnin switchcase。

const initialState = {
  brand: false,
};

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

    default:
      return state;
  }
};

推荐阅读