React-redux show hide component

Odpowiedz Nowy wątek
2020-01-22 18:04

Rejestracja: 6 miesięcy temu

Ostatnio: 3 miesiące temu

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

edytowany 1x, ostatnio: dami45, 2020-01-22 18:05

Pozostało 580 znaków

2020-01-24 11:28

Rejestracja: 5 miesięcy temu

Ostatnio: 3 dni temu

0

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

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

Pozostało 580 znaków

2020-01-24 14:07

Rejestracja: 4 lata temu

Ostatnio: 4 miesiące temu

0

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

Pozostało 580 znaków

2020-01-24 16:57

Rejestracja: 6 miesięcy temu

Ostatnio: 3 miesiące temu

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 ?

Pozostało 580 znaków

2020-01-26 16:01

Rejestracja: 6 miesięcy temu

Ostatnio: 3 miesiące temu

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

Jesteś w stanie odtworzyć ta część apk w jakimś zdalnym srodowisku i mi podesłać? - pawi125 2020-01-28 10:40

Pozostało 580 znaków

2020-02-01 10:50

Rejestracja: 6 miesięcy temu

Ostatnio: 3 miesiące temu

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 :)

Pozostało 580 znaków

Odpowiedz

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