Witam. Mam problem z wyświetlaniem komponentu w redux. Może wie ktoś co robię źle ? Dodam, że dopiero uczę się Reduxa, z góry dzięki ---- KOD:
//Reducers
import types from './types'
const INITIAL_STATE = {
isOpen: false,
}
const iconsOpenReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case types.ICO_OPEN:
return {
...state,
isOpen: true,
}
case types.ICO_CLOSE:
return {
...state,
isOpen: false
}
default:
return state
}
}
export default iconsOpenReducer;
//types
const ICO_OPEN = 'ICO_OPEN'
const ICO_CLOSE = 'ICO_CLOSE'
export default {
ICO_OPEN,
ICO_CLOSE
}
//actions
import types from './types'
const icoOpen = () => ({
type: types.ICO_OPEN
})
const icoClose = () => ({
type: types.ICO_CLOSE
})
export default {
icoOpen,
icoClose
}
//Component
import React from 'react';
import { connect } from 'react-redux'
import actions from '../redux/iconsOpen/duck/actions'
import MessagesScreen from './iconsScreen/messages'
const AppScreen = (props) => {
return (
<div className="appScreen">
{props.isOpen ? <MessagesScreen /> : null}
<div className="icon-div config-icon">
<i class="fas fa-cog"></i>
</div>
<div
className="icon-div calendar-icon"
onClick={props.icoOpen}>
<i class="far fa-calendar-alt"></i>
</div>
<div className="icon-div message-icon">
<i class="far fa-envelope"></i>
</div>
<div className="icon-div music-icon">
<i class="fas fa-headphones"></i>
</div>
</div>
)
}
const mapStateToProps = state => ({
iconsOpen: state.isOpen
})
const mapDispatchToProps = (dispatch) => ({
icoOpen: isOpen => dispatch(actions.icoOpen(isOpen))
})
export default connect(mapStateToProps, mapDispatchToProps)(AppScreen);
Dodam, że state zmienia się z false na true po naciśnięciu przycisku ale komponent nie wyświetla się.