React-redux show hide component

0

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ę.

0

No to jeśli state zmienia się prawidłowo to zastosuj taki zapis w komponentcie

   {props.isOpen  && (
            <your html/>
          )}
0

W mapStateToProps mapujesz na iconsOpen, a w komponencie sprawdzasz isOpen. Musisz ujednolicić nazwy i powinno zadziałać.

0
patryk1452 napisał(a):

W mapStateToProps mapujesz na iconsOpen, a w komponencie sprawdzasz isOpen. Musisz ujednolicić nazwy i powinno zadziałać.

Nic się nie zmieniło, nie wiem już co to może być. Może jakoś inaczej to zrobić się da ?

0
pawi125 napisał(a):

No to jeśli state zmienia się prawidłowo to zastosuj taki zapis w komponentcie

   {props.isOpen  && (
            <your html/>
          )}

No właśnie nie działa nie wiem czemu. State w redux się zmienia ale jakby nie widzi tego w komponencie

0
dami45 napisał(a):
pawi125 napisał(a):

No to jeśli state zmienia się prawidłowo to zastosuj taki zapis w komponentcie

   {props.isOpen  && (
            <your html/>
          )}

No właśnie nie działa nie wiem czemu. State w redux się zmienia ale jakby nie widzi tego w komponencie

Rozwiązane , dzięki za zainteresowanie :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1