Как я могу представить значение глобальным действиям, чтобы поделиться им среди компонентов?

Question

Я пытаюсь выставить значение, чтобы разделить его между компонентами:

У меня есть этот редуктор:

import createReducer from '../../../redux/createReducer';
import ActionTypes from '../constants/ActionTypes';

const initialState = {
  currentService: 'otherservices',
};

export const handlers = {
  [ActionTypes.SELECTED_SERVICE_ACTION](state, action) {
    return {
      ...state,
      currentService: action.payload,
    };
  },
};

export default createReducer(initialState, handlers);

И это действие:

import ActionTypes from '../constants/ActionTypes';

export const selectedServiceAction = service => ({
  type: ActionTypes.SELECTED_SERVICE_ACTION,
  payload: service,
});

export default selectedServiceAction;

И у меня есть этот компонент:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { translate } from 'react-i18next';
import { DropdownV2 } from 'carbon-components-react';
import PropTypes from 'prop-types';
import TableMultiSelectItems from './TableMultiSelectItems';
import { selectedServiceAction } from '../actions/cancellations';

class TableMultiselect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      itemState: 'otherservices',
    };
  }

  onChange = e => this.setState({ itemState: e.selectedItem.id });

  render() {
    const { t } = this.props;
    // Array of dropdown's items
    const menuItems = TableMultiSelectItems(t);

    return (
      <div>
        <DropdownV2
          items={menuItems}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

const wrappedComponent = connect(
  () => ({
    serviceSelected: this.state.itemState,
  }),
  dispatch => ({
    serviceSelectedHandler: serviceSelected => {
      dispatch(selectedServiceAction(serviceSelected));
    },
  }),
)(TableMultiselect);

TableMultiselect.propTypes = {
  t: PropTypes.func.isRequired,
  serviceSelectedHandler: PropTypes.func.isRequired,
};

export default translate()(wrappedComponent);

Что мне нужно от компонента выше, это взять значение, возвращаемое функцией onChange (itemState: e.selectedItem.id });), и выставить его, чтобы захватить его в другоми сделайте что-то вроде этого:

//other imports
import the-Action-To-Get-The-OnChange-Value from "..."

const Cancellations = () => (
  <React.Fragment>
    {the-Action-To-Get-The-OnChange-Value.id === 'thisID' ?
      <SLRequests/> : <SLDevices/>
    }
  </React.Fragment>
);

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

Answer 1

Если вы хотите, чтобы что-то было доступно в глобальном масштабе, вам придется хранить его внутри состояния приложения (избыточное хранилище).В вашем конкретном случае вы хотите хранить e.selectedItem.id.Таким образом, помимо установки состояния (однако это избыточно, поскольку переменная будет доступна глобально).

Что нужно сделать?Внутри функции onChange вы должны отправить действие и передать аргумент.

onChange = (e) => this.props.dispatch(selectedServiceAction(e.selectedItem.id));

Примечание : Для доступа к функции dispatch ваш компонент должен быть подключен.

Тогда он будет пойман редуктором и сохранен в хранилище.