I recently switched to using this boilerplate for my react project with TypeScript. I'm facing difficulty in configuring the correct type of actions as it was easier when I was working with JavaScript. Now, being new to TypeScript, I am struggling to figure out why my code is not functioning properly. Any insights on how to best resolve this issue would be greatly appreciated.
Dashboard.tsx
interface IAction{
type: string,
payload: any,
}
interface IProps {
dashboard: any;
changeUserName: IAction;
}
interface IState {}
class Dashboard extends React.Component<IProps, IState> {
componentDidMount(){
console.log("____FOCUS____");
console.log(this.props);
this.props.changeUserName("NewName");
console.log("____FOCUS____");
}
render() {
return (
<>
<Helmet>
<title>Dashboard</title>
<meta name="description" content="Description of Dashboard" />
</Helmet>
<DashboardComponent username={'somevalue'} />
</>
);
}
}
const mapStateToProps = (state: any, ownProps: any) => ({
dashbaord: selectDashboard(state),
});
const mapDispatchToProps = (dispatch: any, ownProps: any) => ({
...bindActionCreators({
...actions,
}, dispatch),
});
const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withReducer = injectReducer({key: sliceKey, reducer: dashboardReducer});
const withSaga = injectSaga({key: sliceKey, saga: dashboardSaga});
export default compose(
withReducer,
withConnect,
withSaga,
)(Dashboard);
Types
The types I have defined align with the documentation.
/* --- STATE --- */
export interface DashboardState {
username: string;
}
export type ContainerState = DashboardState;
Slice
I've created a slice according to the instructions provided in the documentation.
export const initialState: ContainerState = {
username: 'Initial Username',
};
const dashboardSlice = createSlice({
name: 'dashboard',
initialState,
reducers: {
changeUserName(state, action: PayloadAction<string>) {
state.username = action.payload;
},
},
});
export const { actions, reducer, name: sliceKey } = dashboardSlice;