Ошибка React-Redux: «видимый» не определен - PullRequest
Новая
       7

Ошибка React-Redux: «видимый» не определен

0 голосов
/ 29 октября 2018

Я пытаюсь реализовать функцию боковой панели из https://react.semantic -ui.com / modules / sidebar / # types-sidebar . Но я все еще получаю неопределенную «видимую» ошибку. Я хочу передать свое сопоставленное состояние реквизиту «visible» из моего индекса в navbar.js на кнопках, когда он отключен.

Итак, я создал редуктор 'redurs / App.js': 

    import {
      HIDE_CLICK,
      SHOW_CLICK,
      HIDE_SIDE_BAR,
    } from "../actions/app";

    const initialState = {
      visible: false
    };

    const appReducer = (state = initialState, {type}) => {
      switch(type) {
        case HIDE_CLICK:
          return {
            ...state,
            visible: false,
          }
        case SHOW_CLICK:
          return{
            ...state,
            visible: true,
          }
        case HIDE_SIDE_BAR:
          return {
            ...state,
            visible: false,
          }
      };
    }

    export default appReducer;

Тогда его действие 'action / App.js': 

    export const HIDE_CLICK = "HIDE_CLICK";
    export const SHOW_CLICK = "SHOW_CLICK";
    export const HIDE_SIDE_BAR = "HIDE_SIDE_BAR";

    export const handleHideClick = () => ({
      type: HIDE_CLICK,
    })

    export const handleShowClick = () => ({
      type: SHOW_CLICK,
    })

    export const handleSideBarHide = () => ({
      type: HIDE_SIDE_BAR,
    })

Теперь мой компонент содержит: 'NavBar / index.js' 

    import { connect } from "react-redux";
    import NavBar from "./NavBar";

    import { handleHideClick, handleShowClick, handleSideBarHide } from "../../redux/actions/app";

    /* istanbul ignore next */
    const mapStateToProps = state => ({
      isAuthenticated: state.authentication.authenticated,
      visible: state.app.visible
    });

    const mapDispatchToProps = (dispatch) => {
      return{
        handleHideClick: () => dispatch(handleHideClick),
        handleShowClick: () => dispatch(handleShowClick),
        handleSideBarHide: () => dispatch(handleSideBarHide)
      }
    };

    export default connect(
      mapStateToProps,
      mapDispatchToProps,
    )(NavBar);

и мой 'NavBar / NavBar.js' 

    import React from "react";
    import PropTypes from "prop-types";
    import { Link } from "react-router-dom";
    import { Container, Menu, Button, Sidebar,Segment, Icon, Header, Image } from "semantic-ui-react";

    export const ShowSideBar = ({
      handleShowClick,
      handleHideClick,
      handleSideBarHide
    }) => (
        <div>
          <Button.Group>
            <Button disabled={visible} onClick={handleShowClick}>
              Show sidebar
            </Button>
            <Button disabled={!visible} onClick={handleHideClick}>
              Hide sidebar
            </Button>
          </Button.Group>

          <Sidebar.Pushable as={Segment}>
            <Sidebar
              as={Menu}
              animation='overlay'
              icon='labeled'
              inverted
              onHide={handleSideBarHide}
              vertical
              visible={visible}
              width='thin'
            >
    ...

)

и, наконец, определил редуктор приложений на моем корневом редукторе: 

    import { combineReducers } from "redux";

    import authentication from "./authentication";
    import app from "./app";

    const rootReducer = combineReducers({
      authentication,
      app
    });

    export default rootReducer;

1 Ответ

0 голосов
/ 29 октября 2018

Вам нужно перечислить все реквизиты, которые вам нужны, или просто не разрушать их: 

export const ShowSideBar = ({
  handleShowClick,
  handleHideClick,
  handleSideBarHide,
  visible
}) => (
  ....
)

или export const ShowSideBar = (props) => (...) и доступ ко всему с помощью props.

...