Обновление состояния в редуксе.Несвязанная функция?

Question

У меня есть приложение, которое фильтрует некоторые тесты по нажатию кнопки, которое заполняет и вызывает выпадающее меню.Моя проблема в том, что я хочу выбрать элементы в выпадающем меню с помощью onclick (), которая обновляет состояние выбранного теста.Это необычно, это не работает, потому что когда я console.log () onUpdateSelectedTest, я вижу, что состояние изменяется и обновляется, но selectedTest остается неопределенным.Любые примеры, ресурсы с благодарностью.

Все файлы просто фрагменты.

Это мои TestActions.ts

export function UpdateSelectedTest(test: ITest): ToggleTestActionTypes {
  return {
    type: SELECT_TEST,
    payload: test
  };
}

Это мои Dropdown.tsx

import * as React from "react";
import {
  UpdateSelectedTestType,
  UpdateSelectedTest
} from "../actions/TestActions";
import { ITestState } from "../models/ITestState";

interface IProps {
  onUpdatetoggleTestState: typeof UpdateSelectedTestType;
  onUpdateSelectedTest: typeof UpdateSelectedTest;
  toggleTestState: ITestState;
}
export class Dropdown extends React.Component<IProps> {
  public render() {
    let tests = null;

    tests = this.props.toggleTestState.tests.filter(
      test => test.testType === this.props.toggleTestState.testType
    );
    return (
      <div>
        <ul className="nav nav-pills">
          <a
            className="nav-link dropdown-toggle"
            data-toggle="dropdown"
            href="#"
            role="button"
            aria-haspopup="true"
            aria-expanded="true"
          ></a>
          <div
            className="dropdown-menu show"
            x-placement="bottom-start"
            style={{
              position: "relative",
              willChange: "transform",
              top: "0px",
              left: "0px",
              transform: "translate(0px, 40px, 0px"
            }}
          >
            {tests.map(test => (
              <a
                onClick={() => this.props.onUpdateSelectedTest(test)}
                className="dropdown-item"
                href="#"
              >
                <div className="dropdown-divider"></div>
                {test.name}: {test.description}
              </a>
            ))}
          </div>
        </ul>
      </div>
    );
  }
}

Проблемапроисходит здесь, в Dropdown.tsx

{tests.map(test => (
                  <a
                    onClick={() => this.props.onUpdateSelectedTest(test)}
                    className="dropdown-item"
                    href="#"
                  >
                    <div className="dropdown-divider"></div>
                    {test.name}: {test.description}
                  </a>
  ))}

Это мой Apps.tsx Я передам состояние onUpdateSelectedTest в ListGroup для отображения.

import * as React from "react";
import { ToggleButtonGroup } from "./components/ToggleButtonGroup";
import { Dropdown } from "./components/Dropdown";
import { ITestState } from "./models/ITestState";
import { connect } from "react-redux";
import { AppState } from "./store";
import { bindActionCreators } from "redux";
import {
  UpdateSelectedTestType,
  UpdateSelectedTest
} from "./actions/TestActions";
import { ListGroup } from "./components/ListGroup";

interface IProps {
  onUpdatetoggleTestState: typeof UpdateSelectedTestType;
  onUpdateSelectedTest: typeof UpdateSelectedTest;
  toggleTestState: ITestState;
}

class App extends React.Component<IProps> {
  render() {
    return (
      <div>
        <ToggleButtonGroup
          toggleTestState={this.props.toggleTestState}
          onUpdatetoggleTestState={this.props.onUpdatetoggleTestState}
        />

        <Dropdown
          toggleTestState={this.props.toggleTestState}
          onUpdatetoggleTestState={this.props.onUpdatetoggleTestState}
          onUpdateSelectedTest={UpdateSelectedTest}
        />

        <ListGroup
          toggleTestState={this.props.toggleTestState}
          onUpdatetoggleTestState={this.props.onUpdatetoggleTestState}
          onUpdateSelectedTest={UpdateSelectedTest}
        />
      </div>
    );
  }
}

const mapStateToProps = (state: AppState) => ({
  toggleTestState: state.toggle
});

const mapDispatchToProps = (dispatch: any) => {
  return {
    onUpdatetoggleTestState: bindActionCreators(
      UpdateSelectedTestType,
      dispatch
    ),
    onUpdateSelectedTest: bindActionCreators(UpdateSelectedTest, dispatch)
  };
};

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

Это мой toggleButtonReducers.ts

   const initialState: ITetsState = {
      testType: TestType.test1,
      test: dbTests,
      question: dbQuestion,
      selectedTest: undefined
      //selectedQuestion: undefined
    };

    export function toggleButtonReducer(
      state = initialState,
      action: ToggleTestActionTypes
    ) {
      switch (action.type) {
        case TOGGLE_TEST_TYPE:
          return {
            ...state,
            testType: action.payload
          };
        case SELECT_TEST:
          return {
            ...state,
            selectedTest: action.payload
          };
        default:
          return state;
      }
    }

Answer 1

Скорее всего, вам нужно использовать создателей действий, связанных с отправкой.В настоящее время вы звоните им, но они не отправляются.

Например, эта строка:

onUpdateSelectedTest={UpdateSelectedTest}

Должна быть:

onUpdateSelectedTest={this.props.onUpdateSelectedTest}

Answer 2

В приведенном ниже коде, откуда приходит probes значение?Я не вижу никаких переменных зондов в состоянии или из реквизита.

{probes.map(test => (
                  <a
                    onClick={() => this.props.onUpdateSelectedTest(test)}
                    className="dropdown-item"
                    href="#"
                  >
                    <div className="dropdown-divider"></div>
                    {test.name}: {test.description}
                  </a>
  ))}

Я думаю, вместо зондов это должно быть tests.