Подключение Выберите Combobox с помощью React / Redux, не отправляя событие отправки

Question

Я пытаюсь инициализировать поле выбора, используя хранилище состояний Redux на моем веб-сайте React.Хранилище состояний содержит как список доступных параметров, так и значение, представляющее выбранный в данный момент.

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

Однако, когда я пытаюсь изменитьполе со списком select в пользовательском интерфейсе выдает ошибку

TypeError: Невозможно прочитать свойство 'props' из неопределенного ./src/GroupingSelector.tsx.GroupingSelector.onGroupingChange C: /src/GroupingSelector.tsx: 32 29 |30 |private onGroupingChange (e: any) {31 |const {value} = e.target;

32 |this.props.dispatch ({тип: 'UPDATEGROUPING', selectedOption: значение});33 |} 34 |} 35 |

Мой класс

import * as React from 'react';
import { connect } from 'react-redux';
import './App.css';
import IAction from './interfaces/IAction';

interface IGroupingProps {
    groupingOptions : string[],
    selectedGroupingOption : string,
    dispatch : any
  }

class GroupingSelector extends React.Component<IGroupingProps, {}> {

      public render() {

       return (
        <div className="Grouping-selector">
            <div className="Horizontal-panel-right Grouping-search-combo">
                <select onChange={this.onGroupingChange}>
                    {this.props.groupingOptions.map((name, index)=> 
                        <option key={index}>{name}</option>
                    )}
                </select>
            </div>
            <div className="Content Horizontal-panel-right">
                Group by
            </div>            
        </div>);
    }

    private onGroupingChange(e: any) {
         const { value } = e.target;
         const action: IAction<string> = {type: "UPDATEGROUPING", payload: value};
         this.props.dispatch(() => action);
      }    
}

function mapStateToProps(state: any) {
    return {
        groupingOptions: state.groupingOptions,
        selectedGroupingOption: state.selectedGroupingOption,
    };
  }    

export default connect(mapStateToProps)(GroupingSelector);

Кто-нибудь может подсказать, что с этим не так?

Answer 1

Вы должны отправить функцию.

 this.props.dispatch(() => { type: 'UPDATEGROUPING', selectedOption: value }); 

Хотя вам действительно стоит подумать о том, чтобы action.js файл и импортировать его.

action.js

export const updateGrouping = (selectedOption) => {
  type: 'UPDATEGROUPING', 
  selectedOption
}

Ваш класс

this.props.dispatch(updateGrouping(value))