学习地址1：pan.baidu.com/s/14sTSypnp… 提取码: jn7s 学习地址2：share.weiyun.com/SNltUNLW 密码：zi3dc7
我们今天讲的实际上是一个工作在 HTTP 七层协议的网关，它主要做的有几件事情： 第一，公网入口。它作为我们公有云服务的一个入口，可以把公有云过来的请求定向到用户的资源上面去。 第二，对接后端资源。我们云开发有很多内部的资源，像云函数、容器引擎这样的资源，便可以把请求对接到这样的云资源上面去。 第三，身份鉴权。云开发有自己的一套账号身份体系，请求里如果是带有身份信息的，那么网关会对身份进行鉴权。
那么该如何操作呢？非常简单，只需要三个步骤。 第一步，把function 改为class，然后去掉括号，让app继承react.component。 第二步，使用react 组件类的成员、render函数，把retrun的jsx代码全部包裹起来。 第三步需要我们创建构建函数，在构建函数中初始化state状态。react的构建函数的写法我们在前面课程中学过，而在这个组件的state状态中，我们需要初始化一个机器人画廊的空列表。 const fetchData = async () => { const response = await fetch("jsonplaceholder.typicode.com/users") // .then((response) => response.json()) // .then((data) => setRobotGallery(data)); const data = await response.json() setRobotGallery(data) }; 接下来，我们就可以开始在组件渲染的时候使用这个loading state了。找到机器人画册列表，就是在组件下面的div元素。我们使用一个花括号把整个div元素都包起来。然后在花括号内做逻辑判断，如果loading state 等于false的时候，代表loading结束，我们显示机器人画册列表；而当loading 为 false的时候，我们应该在这里显示一个转菊花的loaidng 提示，不过我们这里稍微简单处理一下，显示一个loading的字符串意思一下就行了。
{!loading ? (
{robotGallery.map((r) => (
<Robot
key={robot_${r.id}}
id={r.id}
name={r.name}
email={r.email}
/>
))}
) : (
loading 加载中
)}
接着，把三个图片的引用放到iamge组件的src属性中
最后，别忘了在组件index、以及component index文件中都导出一下ProductCollection组件。 接下来，我们回到app.tsx，引用ProductCollection组件以后就可以使用了。请注意，ProductCollection组件我们将会使用3次，每次传入不同的标题，和产品列表。而标题还可以通过Title组件的type属性配置不同的颜色。 爆款推荐} sideImage={sideImage} products={productList1} /> 新品上市} sideImage={sideImage2} products={productList2} /> 国内游推荐} sideImage={sideImage3} products={productList3} /> 好了，这下错误就消失了，现在，react-router的数据以及路由操作的函数就都通过上下文Context传递给ProductImage组件了，我们可以随意在组件中使用history所定义的所有操作了。const ProductImageComponent: React.FC = ({ id, size, imageSrc, price, title, ...props }) => { console.log(props.history) console.log(props.location) console.log(props.match) return ( 我们就可以通过this.props来访问t函数了。 接下来，我们把header中所有的语言都是用t函数来封装一下。 <Typography.Text>{t("header.slogan")}</Typography.Text>
<Menu.Item key={"new"}>{t("header.add_new_language")}</Menu.Item>
<Button.Group className={styles["button-group"]}> <Button onClick={() => history.push("register")}> {t("header.register")} <Button onClick={() => history.push("signIn")}> {t("header.signin")} </Button.Group>
<Typography.Title level={3} className={styles.title}> {t("header.title")} </Typography.Title>
{t("header.home_page")} {t("header.weekend")} {t("header.group")} {t("header.backpack")} {t("header.private")} {t("header.cruise")} {t("header.hotel")} {t("header.local")} {t("header.theme")} {t("header.custom")} {t("header.study")} {t("header.visa")} {t("header.enterprise")} {t("header.high_end")} {t("header.outdoor")} {t("header.insurance")} 比如说，我们有一个加法计算器，curriedAdd 。通过柯里化，给函数传入第一部分的参数；然后，赋值定义给另一个函数，addTen；最后，在调用addTen函数的时候传入第二部分的参数。let next = store.dispatch
store.dispatch = function dispatchAndLog(action) {
console.log('dispatching', action)
console.log('当前 state', store.getState());
next(action)
console.log('更改后的 state', store.getState());
}
那么，如果把这个入口封装一下，给未来的拓展做更广泛的应用，那么，我们可以把整个流程都写在函数里来处理，函数名称叫做，applyMiddleware。
const applyMiddleware = function(middleware){
let next = store.dispatch;
// 这里传入store，因为中间件中有可能会用到getState获取数据，比如打印store
store.dispatch = middleware(store)(next);
}
applyMiddleware(dispatchAndLog) 首先，我们引入几个依赖，productDetailSlice、然后从自定义hook中引入useSelector ；最后，从react-redux中引入useDispatch函数。
import { productDetailSlice } from "../../redux/productDetail/slice";
import { useSelector } from "../../redux/hooks";
import { useDispatch } from "react-redux";
接下来，我们使用useSelector来连接产品详情数据中的loading、error以及data这三个字段的数据。
const loading = useSelector((state) => state.productDetail.loading);
const product = useSelector((state) => state.productDetail.data);
const error = useSelector((state) => state.productDetail.error);
