Zeigen/Verbergen div mit CSS in React JS/Redux

Question

Ich versuche, ein div mit CSS und className s. Ich verwende redux, um den Zustand des boolean zu aktualisieren. Ich kann durch die Redux-Chrom-Erweiterung bestätigen, dass der Zustand ist ändern, aber das div nicht angezeigt wird. Wenn jemand irgendwelche Ideen hat, was falsch ist, lass es mich wissen.

Komponente:

const ShowHideDiv = (props) => (
    <div> 
    <Button onClick={props.toggleDiv} /> 
    <div className={props.hidden ? style.hidden : style.open}> 
     <TextInput /> 
    </div> 
    </div> 
); 

function mapDispatchToProps(dispatch) { 
    return { 
    toggleDiv:() => dispatch(toggleDiv()), 
    }; 
} 

export default connect(null, mapDispatchToProps)(ShowHideDiv); 

actions.js:

const toggleDiv =() => { 
    return { 
    type: 'TOGGLE_DIV', 
    }; 
}; 

reducers.js

const toggleDivReducer = (state = { hidden: true}, action) => { 
    switch(action.type) { 
    case 'TOGGLE_DIV': 
     return Object.assign({}, state, {hidden: !state.hidden}); 
    default: 
     return state; 
    } 
}; 

style.scss

.hidden { 
    display: none; 
} 

.open { 
    display: inline; 
} 

Display-Seite

<ShowHideDiv hidden={props.hidden} /> 

function mapStateToProps({demo}) { 
    return { 
    hidden: demo.hidden, 
    }; 
} 

Answer 1

Ich habe herausgefunden, was ich falsch gemacht habe. Das Problem war auf meiner Anzeigeseite mapStateToProps. Ich habe die hidden Requisite nicht korrekt zugewiesen.

Statt dies zu tun:

function mapStateToProps({demo}) { 
    return { 
    hidden: demo.hidden, 
    }; 
} 

ich sollte dies getan haben:

function mapStateToProps({demo}) { 
    return { 
    hidden: demo.toggleDivReducer.hidden, 
    }; 
} 

Stellen Sie sicher, dies besonders im Auge zu behalten, wenn Sie eine combineReducers Funktion haben.

Answer 2

Sie sollten mapStateToProps als ersten Parameter von connect (in Ihrer Komponente) übergeben.

Außerdem verschicken Sie niemals Ihre Versandmethode toggleDiv an irgendetwas, also würde technisch nichts Ihr div sichtbar machen. Sie könnten kurz testen, indem Sie Ihren Reducer aktualisieren, so dass der Standardzustand { hidden: false } ist, und gehen Sie dann über die Verkabelung, um durch irgendeine Art von Ereignis irgendwo ausgelöst zu werden.