How can I expose a value to the global actions to share it among components?

Question

I am trying to expose a value in order to share it among components:

I have this reducer:

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

And this action:

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

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

export default selectedServiceAction;

And I have this component:

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

What I need from the component above is to take the value returned by the onChange function ( itemState: e.selectedItem.id }); ) and expose it in order to grab it in another component and do something like this:

//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>
);

This is the first component I am trying to do with Redux, so I need some help trying to achieve what I need.

Answer 1

If you want something to be accessible globally, you will have to store it inside application state (redux store). In your particular case, you want to store e.selectedItem.id . So besides setting the state (however this is redundant because the variable will be accessible globally).

What you need to do? Inside onChange function you have to dispatch the action and pass the argument.

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

Note : To access the dispatch function your component has to be connected.

Then it will be catched by reducer and will be saved in store.