Below is my React component written in TypeScript:
import React from 'react';
import {connect, ConnectedProps} from 'react-redux';
import logo from './assets/logo.png';
// import { Counter } from './features/counter/Counter';
import './App.css';
import {IApplicationState} from './features/application/reducers';
const mapStateToProps = (application: IApplicationState) => {
const applicationComposite = application.applicationComposite;
return {applicationComposite};
}
const connector = connect(mapStateToProps);
type PropsFromRedux = ConnectedProps<typeof connector>
interface Props extends PropsFromRedux {};
class App extends React.Component<Props> {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<span>
<span>Attractora </span>
{this.props.applicationComposite && <span>{this.props.applicationComposite.content}</span>}
</span>
</header>
</div>
);
}
}
export default connector(App);
I am encountering an issue where the value of applicationComposite is always undefined, despite having an initial state value set in the reducer.
Upon debugging, I discovered that
mapStateToProps(application: IApplicationState)applicationComposite as application.application.applicationCompositeapplicationComposite = application.application.applicationCompositeProperty 'application' does not exist on type 'IApplicationState'.
I have followed a tutorial on manually typing connect, but I am unable to identify where I might be making a mistake.
UPDATE
This is how my root reducer looks like:
import {combineReducers} from 'redux';
import application from '../features/application/reducers';
const rootReducer = combineReducers({
application,
});
export default rootReducer;
And here is my application reducer:
import { Dictionary } from '@reduxjs/toolkit';
import { ActionInterface } from '../generals';
import {
FETCH_APPLICATION_COMPOSITE_SUCCESS,
SET_CURRENT_APPLICATION_COMPONENT
} from './actions';
export interface IApplicationState {
applicationComposite: any,
currentApplicationComponent: string | null,
}
const INIT_STATE = {
applicationComposite: {content: 'test_content'},
currentApplicationComponent: null
}
export default (state=INIT_STATE, action: ActionInterface) => {
switch(action.type) {
case FETCH_APPLICATION_COMPOSITE_SUCCESS: {
return {
...state,
//@ts-ignore: Object is possibly 'undefined'
applicationComposite: action.payload.applicationComposite
}
}
case SET_CURRENT_APPLICATION_COMPONENT: {
return {
...state,
//@ts-ignore: Object is possibly 'undefined'
currentApplicationComponent: action.payload.applicationComponent
}
}
default: {
return state;
}
}
}