React Redux在道具验证中丢失，并推荐使用Redux-observable从外部API初始化容器的模式

Question

我正在尝试学习如何在Typescript环境中使用React with Redux。我正在使用react redux打字游戏中建议的模式。然而，我在尝试构建下面列出的代码时收到了以下错误：

道具验证中缺少"资源">

道具验证中缺少"courses.map">

是否有其他人经历过这种类型的错误？这是eslint插件的linting错误吗：react/推荐？

当使用redux-observable从API检索数据时，我也很难理解从redux-store初始化默认状态的过程。我有存储、史诗、减速器、动作等，根据react redux typescript游乐场的模式进行配置。这些配置用于使用可观察的冗余从API获取课程列表。随后，我定义了三个动作和减速器：1.FETCH_COURSES_ERROR2.FETCH_COURSES_REQUEST3.FETCH_COURSES_ccess

然后如何触发我的CourseList容器来开始获取和呈现课程列表的过程。让redux存储获取课程列表的初始状态(fetch_COURES_REQUEST->fetch_COURLES_SUCCESS||fetch_courses_REQUEST->fetch_COURIES_ERROR(是一种好的做法吗？简而言之，我不知道如何将史诗连接/触发到CourseList容器…

Epic中间件已初始化并在存储模块中运行。。。。

import { RootAction, RootState, Services } from 'ReduxTypes';
import { Epic } from 'redux-observable';
import { isOfType } from 'typesafe-actions';
import { of } from 'rxjs';
import {
catchError,
filter,
ignoreElements,
map,
switchMap,
} from 'rxjs/operators';
import { fetchCoursesFail, fetchCoursesSuccess } from './actions';
import constants from './constants';
export const fetchCoursesRequestAction: Epic<
RootAction,
RootAction,
RootState,
Services
> = (action$, state$, { courseServices }) =>
action$.pipe(
filter(isOfType(constants.FETCH_COURSES_REQUEST)),
switchMap(action =>
courseServices.default.getCourses().pipe(
map(courses => fetchCoursesSuccess(courses)),
catchError(error => of(fetchCoursesFail(error))),
),
),
ignoreElements(), // ignore everything except complete and error, template does this
);

课程列表

import React from 'react';
import Grid from '@material-ui/core/Grid';
import { GridSpacing } from '@material-ui/core/Grid';
import Course from '../../components/Course/Course';
import { Course as CourseModel } from '../../redux/features/course/model';
type Props = {
courses: CourseModel[];
// isLoading: boolean;
// fetchCourses: any;
};
export const CourseList: React.FC<Props> = props => {
const { courses } = props;
return (
<div style={{ marginTop: 20, padding: 30 }}>
{
<Grid container spacing={2 as GridSpacing} justify="center">
{courses.map(element => (
<Grid item key={element.courseID}>
<Course course={element} />
</Grid>
))}
</Grid>
}
</div>
);
};

课程列表-索引.ts

import { RootState } from 'ReduxTypes';
import { connect } from 'react-redux';
import { CourseList } from './CourseList';
import { courseActions, courseSelectors } from '../../redux/features/course';
const mapDispatchToProps = {
onFetchCoursesRequest: courseActions.fetchCoursesRequest,
};
const mapStateToProps = (state: RootState) => ({
courses: courseSelectors.getReduxCourses(state.courses.fetchCoursesSuccess),
});
const CourseListConnected = connect(
mapStateToProps,
mapDispatchToProps,
)(CourseList);
export default CourseListConnected;

应用程序

import React, { Component, Suspense, lazy } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import ErrorBoundary from '../errors/ErrorBoundary';
import { NavBar } from './NavBar/NavBar';
// code splitting at the route level
// lazy loading by route component, we could take this
// a step further and perform at component level
// React.lazy requires that the module export format for a component uses default
const About = lazy(() =>
import(
/*
webpackChunkName: "about-page",
webpackPrefetch: true
*/ '../views/About/About'
),
);
const CourseList = lazy(() =>
import(
/*
webpackChunkName: "course-list",
webpackPrefetch: true
*/ '../containers/CourseList'
),
);
const Home = lazy(() =>
import(
/*
webpackChunkName: "home-page",
webpackPrefetch: true
*/ '../views/Home/Home'
),
);
type AppProps = {};
export class App extends Component<AppProps, {}> {
public render(): JSX.Element {
return (
<BrowserRouter>
<div>
<NavBar />
<Suspense fallback={<div>LoaderOptionsPlugin...</div>}>
<Switch>
<Route path="/" component={Home} exact></Route>
<Route path="/about" component={About}></Route>
<Route
path="/courses"
render={(props): JSX.Element => (
<ErrorBoundary {...props}>
<CourseList />
</ErrorBoundary>
)}
></Route>
{/* <Route component={Error404}></Route> */}
</Switch>
</Suspense>
</div>
</BrowserRouter>
);
}
}

main.tsx

import React from 'react';
import { render } from 'react-dom';
import { App } from './app/components/App';
import { Provider } from 'react-redux';
import store from './app/redux/store';
const rootElement = document.getElementById('root');
render(
<Provider store={store}>
<App />
</Provider>,
rootElement,
);

Answer 1

工作正常。我使用useEffect react钩子来触发获取课程列表的请求操作。当CourseList功能组件启动时，课程的初始状态为空。然后，它通过useEffect挂钩，触发fetchCoursesSync.request操作，映射到fetchCourses调度属性。

fetchCourseRequestAction史诗程序然后进行ajax调用，随后触发fetchCoursesSuccess或fetchCoursesFail的操作。

我的下一步是了解如何响应史诗触发的失败获取课程请求，并将其抛出到周围的错误边界。。。。。

import { RootState } from 'ReduxTypes';
type StateProps = {
isLoading: boolean;
courses: courseModels.Course[];
};
const dispatchProps = {
fetchCourses: fetchCoursesAsync.request,
};
const mapStateToProps = (state: RootState): StateProps => ({
isLoading: state.courses.isLoadingCourses,
courses: courseSelectors.getReduxCourses(state.courses),
});
type Props = ReturnType<typeof mapStateToProps> & typeof dispatchProps;
const CourseList = ({
courses = [],
fetchCourses,
isLoading,
}: Props): JSX.Element => {
// fetch course action on mount
useEffect(() => {
fetchCourses();
}, []);
if (isLoading) {
return <p>Loading...</p>;
}
return (
<div style={{ marginTop: 20, padding: 30 }}>
{
<Grid container spacing={2 as GridSpacing} justify="center">
{courses.map(element => (
<Grid item key={element.courseID}>
<Course course={element} />
</Grid>
))}
</Grid>
}
</div>
);
};

Answer 2

回答您的第一个问题：是的，这是来自react/prop-types规则的esint错误，您可以安全地将其关闭，不需要使用typescript的道具类型。

您的第二个问题，异步操作的第二部分应该发送到哪里？它应该从redux可观察史诗中发送，而不是从redux本身发送，也不是从react容器组件发送。

redux-observable文档有一个在Real world example下处理异步操作的简单示例https://redux-observable.js.org/docs/basics/Epics.html