Updating state in redux. Unbound function? - reactjs

Question

I have an application that filters some test on a button click that populates and triggers a dropdown menu. My issue that I'm having is, I want to select the items within the dropdown menu via onclick() that updates the state of the selected test. It's unusual it does not work because when I console.log() the onUpdateSelectedTest I can see that state is being changed and updated but selectedTest remains undefined. Any examples, resources is greatly appreciated.
All files are just snippets.
This is my TestActions.ts
export function UpdateSelectedTest(test: ITest): ToggleTestActionTypes {
return {
type: SELECT_TEST,
payload: test
};
}
This is my 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>
);
}
}
The problem occurs here in the 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>
))}
This is my Apps.tsx
I will past the state of the onUpdateSelectedTest to the ListGroup to be displayed.
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);
This is my 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

You likely need to use the dispatch bound action creators. Currently you're calling them but they're not being dispatched.
For example, this line:
onUpdateSelectedTest={UpdateSelectedTest}
Should be:
onUpdateSelectedTest={this.props.onUpdateSelectedTest}

Answer 2

In the below code, from where probes value is coming? I don't see any probes variable in the state or from props.
{probes.map(test => (
<a
onClick={() => this.props.onUpdateSelectedTest(test)}
className="dropdown-item"
href="#"
>
<div className="dropdown-divider"></div>
{test.name}: {test.description}
</a>
))}
i think, instead of probes it should be tests.