App.tsx: для типа '{}' отсутствуют следующие свойства из типа 'IProps': getProjects, projects
Я следовал этому примеру (не уверен, что он лучший, но я с трудом нахожу несколько хороших примеров использования реакций, редукса, машинописи и асин c. С или без thunk, но кажется, что люди рекомендуют thunk? Я просто хотел бы знать, почему я получаю эта ошибка и некоторые отзывы о том, хорош ли это подход ребенку?: S
App.tsx
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { Projects } from "./features/Projects";
function App() {
return (
<div className='App'>
<header className='App-header'>
<img src={logo} className='App-logo' alt='logo' />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className='App-link'
href='https://reactjs.org'
target='_blank'
rel='noopener noreferrer'
>
Learn React
</a>
<Projects />
</header>
</div>
);
}
export default App;
redurs.ts
import { IProjectState, ProjectActions } from "./types";
import { Reducer } from "react";
const initialProjectState: IProjectState = {
projects: [],
};
export const projectReducer: Reducer<IProjectState, ProjectActions> = (
state = initialProjectState,
action: ProjectActions
): IProjectState => {
switch (action.type) {
case "GettingProjects": {
return {
...state,
};
}
case "GotProjects": {
return {
...state,
projects: action.projects,
};
}
}
};
actions.ts
import { IProject, IGotProjectsAction, IGettingProjectsAction } from "./types";
import agent from "../../agent";
import { ThunkAction } from "redux-thunk";
import { ActionCreator, Dispatch } from "redux";
export const getProjectsActionCreator: ActionCreator<ThunkAction<
// The type of the last action to be dispatched - will always be promise<T> for async actions
Promise<IGotProjectsAction>,
// The type for the data within the last action
IProject[],
// The type of the parameter for the nested function
null,
// The type of the last action to be dispatched
IGotProjectsAction
>> = () => {
return async (dispatch: Dispatch) => {
const gettingProjectsAction: IGettingProjectsAction = {
type: "GettingProjects",
};
dispatch(gettingProjectsAction);
const projects = await agent.Projects.list();
const gotProjectsAction: IGotProjectsAction = {
projects,
type: "GotProjects",
};
return dispatch(gotProjectsAction);
};
};
типов. ts
import { Action } from "redux";
export interface IProject {
id: string;
name: string;
number: string;
status: number;
description: string;
}
export interface IProjectState {
projects: IProject[];
}
export interface IGettingProjectsAction extends Action<"GettingProjects"> {}
export interface IGotProjectsAction extends Action<"GotProjects"> {
projects: IProject[];
}
export type ProjectActions = IGettingProjectsAction | IGotProjectsAction;
Projects.tsx
import React, { FC, useEffect } from "react";
// import { IProjectState } from "../store/project/types";
import { connect } from "react-redux";
import { IAppState } from "../store";
import { getProjectsActionCreator } from "../store/project/actions";
import { IGotProjectsAction, IProject } from "../store/project/types";
import { ThunkDispatch } from "redux-thunk";
import { AnyAction } from "redux";
interface IProps {
getProjects: () => Promise<IGotProjectsAction>;
projects: IProject[];
}
export const Projects: FC<IProps> = ({ getProjects, projects }) => {
useEffect(() => {
getProjects();
}, []);
return <div></div>;
};
const mapStateToProps = (store: IAppState) => {
return {
projects: store.project.projects,
};
};
const mapDispatchToProps = (dispatch: ThunkDispatch<any, any, AnyAction>) => {
return {
getProjects: () => dispatch(getProjectsActionCreator()),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Projects);
store / index.ts
import { projectReducer } from "./project/reducers";
import { combineReducers, createStore, applyMiddleware, Store } from "redux";
import thunk from "redux-thunk";
import { IProject } from "./project/types";
const rootReducer = combineReducers({
project: projectReducer,
});
interface IProjectState {
readonly projects: IProject[];
}
export interface IAppState {
project: IProjectState;
}
export function configureStore(): Store<IAppState> {
const store = createStore(rootReducer, undefined, applyMiddleware(thunk));
return store;
}
agent.ts
import axios, { AxiosResponse } from "axios";
import { IProject } from "./store/project/types";
axios.defaults.baseURL = "http://localhost:5000/api";
const responseBody = (response: AxiosResponse) => response.data;
const requests = {
get: (url: string) => axios.get(url).then(responseBody),
post: (url: string, body: {}) => axios.post(url, body).then(responseBody),
put: (url: string, body: {}) => axios.put(url, body).then(responseBody),
delete: (url: string) => axios.delete(url).then(responseBody),
};
const Projects = {
list: () => axios.get(`/projects`).then(responseBody),
create: (project: IProject) => requests.post("/projects", project),
};
export default {
Projects,
};