Реагировать |Передайте состояние Redux с помощью селектора создания и скрытия пункта меню - PullRequest
Новая
       5

Реагировать |Передайте состояние Redux с помощью селектора создания и скрытия пункта меню

0 голосов
/ 20 ноября 2018

В компоненте React, который обрабатывает боковую панель, у нас есть Menu Items, как modules.Я хочу передать определенное состояние из Redux, а в случае ложного скрыть определенный элемент.Я сделал это, но с передачей состояния в качестве реквизита с componentWillRecieveProps.Но мне нужно сделать это специально с createSelector из reselect, так как componentWillRecieveProps устареет, и мы начинаем использовать повторный выбор все больше и больше.

Проблема в том, что я понятия не имею, как это сделать.Повторный выбор документов скорее сбивает с толку, чем помогает. Так вы можете немного помочь?

Компонент: 

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { createSelector } from 'reselect';

import { isRouteActive } from './location';

class ModuleNavigation extends Component {
  static propTypes = {
    modules: PropTypes.array,
    user: PropTypes.object,
    currentRoute: PropTypes.string,
    isMinimized: PropTypes.bool,
    isItAvailable: PropTypes.bool,
  }

  state = {
    isOpen: false,
  }

  constructor(props) {
    super(props);

    this.topNavRef = React.createRef();
    this.bottomNavRef = React.createRef();
    this.moduleNavRef = React.createRef();
  }

  componentDidUpdate() {
    this.updateArrows();
  }

  componentDidMount() {
    this.updateArrows();
    window.addEventListener('resize', this.updateArrows);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateArrows);
  }

  onToggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
  }

  getRefId = (index) => {
    if (index === 0) return this.topNavRef;
    if (this.props.modules && index === this.props.modules.length - 1) return this.bottomNavRef;

    return null;
  }

  renderGroup = (group, index, user, currentRoute, isMinimized) => (
    <ul ref={this.getRefId(index)} key={group.name} className="module-navigation-group nav">
      {
        <li className={classNames('mt-10 mb-10 module-navigation-group-separator', { hidden: index === 0 })} />
      }
      {group.children
        .filter(mod =>
          mod.route && (!mod.permissions || userHasPermission(user, mod.permissions)))
        .map(mod =>
          (<li key={mod.name} className={classNames('module-navigation-group-item', { active: isRouteActive(currentRoute, mod.route) })}>
            <a href={(mod.parentApp ? '#' : '') + mod.route} target={mod.target} title={mod.name}>
              <i className={`fa ${mod.classNames} module-navigation-group-item-icon`} />
              {!isMinimized && <span className="hidden-xs hidden-sm ml-15 module-navigation-group-item-label">{mod.name}</span>}
            </a>
          </li>))}
    </ul>
  )

  render() {
    const {
      modules,
      currentRoute,
      user,
      isItAvailable,
    } = this.props;

    if (!user || !modules || !modules.length) return null;

    return (
      <div className={classNames('module-navigation-wrapper', { 'is-minimized': isMinimized })}>
        <div ref={this.moduleNavRef} isZKAvailable={isZKAvailable} className="module-navigation">
          {
            modules.map((group, index) =>
              this.renderGroup(group, index, user, currentRoute, isMinimized))
          }
        </div>
    );
  }
}

export default ModuleNavigation;

Я хочу передать логическое значение isItAvailable пунктам меню, называемымmodules здесь, и проверьте дочерние элементы модулей, для конкретного.Если isItAvaialable =false не показывать

1 Ответ

0 голосов
/ 20 ноября 2018

Привет, вам нужен небольшой рефакторинг для вашего компонента класса, чтобы вы могли обернуть компонент с connect hoc, получить значения состояния и вставить их как реквизиты .

Inваш компонент класса вы вносите эти изменения, чтобы получить isAvailable в качестве реквизита, например, this.props.isAvailable: 

// import connect hoc from react-redux
import { connect } from 'react-redux'

// import your selector from e.g. selectors.js, on the top
import {getIsAvailable} from './selectors'


// bottom, out of the class create the mapStateToProps function,
// in order to get state values and inject them as props to the component
const mapStateToProps = (state) => {
  return {
    isAvailable: getIsAvailable(state),
  }
}

// you export your component wrapped with the connect hoc, like so
export default connect(mapStateToProps, null)(ModuleNavigation)

В ваш файл селекторов вы импортируете reselect и используете CreateSelecto как: 

import { createSelector } from 'reselect'

// get the local state data.
// you are gonna change the structure based on yours
const getLocalState = state => state.data

// here with creteSelector:
// 1. call the localstate and return the data
// 2. get the data as param of an arrow func and 
// make whatever we like with the data (calcs, checks etc)
// and finally return the data we need.
export const getIsAvailable = createSelector(
  getLocalState,
  data => data.isAvailable || false
)

Вот и все.надеюсь, это поможет.

...