Я пытаюсь настроить свой первый проект с Redux, но борюсь с последними деталями.
Когда я пытаюсь использовать stateProps, я получаю ошибку Property XX does not exist on type (...)
, когда пытаюсь получить доступ к this.props.isLoading
, который является свойством Store
.
Я использую React Redux и Router.
РЕДАКТИРОВАТЬ: У меня те же проблемы с mapDispatchToProps
, но я показываю только реквизиты состояния здесь. (Надеясь, что решение для состояний также решит проблемы с диспетчеризацией)
Вот соответствующий код:
myReducer.ts в / редукторы
export default function reducer(
state = {
isLoading: false,
},
action: any
): Record<string, any> {
switch (action.type) {
case "SET_LOADING": {
return { ...state, earningHistorySolved: true };
}
default:
return state;
}
}
Index.ts в каталоге редуктора
import { combineReducers } from "redux";
import myReducer from "./reducers";
export default combineReducers({
myReducer
});
myAction.ts
export function setLoading(): Record<string, any> {
return {
type: "SET_LOADING",
payload: {
testPayload: 1
}
};
}
App.tsx
class App extends Component {
render(): React.ReactNode {
return (
<Provider store={store}>
<Router>
<div>
<TopSection />
<Route exact path="/" component={StartCase} />
<Route
path="/cars/:carId/bike/:No"
component={Content}
/>
</div>
</Router>
</Provider>
);
}
}
export { App }
Файл, в котором я пытаюсь использовать реквизит , (ошибка при this.props.isLoading
)
import React, { Component, ReactNode } from "react";
import { RouteComponentProps, withRouter } from "react-router-dom";
import { connect } from "react-redux";
interface IMyList {
group?: number,
}
class myList extends Component<RouteComponentProps<any> & IMyList > {
constructor(props: any) {
super(props);
}
render(): ReactNode {
return (
<Layout>
<Button flagged={this.props.isLoading}/>
</Layout>
);
}
}
const mapStateToProps = function mapStateToProps(state: any): Record<string, any> {
return {
isLoading: state.myReducer.isLoading,
};
};
export default withRouter(connect(mapStateToProps)(myList));