React旅游网

购物车的内容在App.tsx中dispatch来获取，这样后面在任何页面就可以直接获取reducer中的数据了

购物车数据以及获取数据都保存在redux-tooltik中
动作（获取购物车数据、添加购物车、清空购物车、购物车页面点击下单支付都在同一个silce中）
数据：const initialState: shopingCartState = {
    loading: false,
    items: [],   //购物车内容
    error: false,
}

UI：左边是购物车里的内容，利用组件<SearchProductList/>来显示，
右边是价格显示，利用组件<PaymentCard/>来显示。

逻辑：点击清空购物车分发clearShoppingCar()的action
点击下单支付跳转到nav('/placeorder')，同时分发一个action：
dispatch(checkout(jwt))，这个action分发完之后同时改变了最后订单的currentOrder的数据

登陆成功之后，在首页Header中点击注销按钮，需要清空jwt（token），是全局的都需要清空，不止是Header中的，
所以逻辑是直接清空user/slice.ts中的jwt。故在此slice中再添加一个action，点击注销后就dispatch这个action

切换成中文或者英文

1、账号（邮箱形式）、密码（大小写字母、数字、特殊字符的组合），还需要确认密码即可注册成功，
注册成功后跳转到登录页面。
2、使用到UI组件：<Form></Form>
3、逻辑：只有注册跳转这些动作，没有涉及到额外的数据或功能，所以在自己页面发送请求，不涉及任何的redux

1、输入正确的账号、密码。点击登录即可登陆成功。
2、使用到的UI组件：主要是表单组件。import { Button, Checkbox, Form, Input } from 'antd';
3、逻辑：采用的是jwt登录，发送登录请求，登陆成功后会返回一个token，这个token会在多处用到，所以token数据
保存在redux（使用react-tooltik）中，redux/userSlice/slice.ts中处理发送请求登录的url，以及保存loading、token等数据。
逻辑：登录页面实现跳转到首页是根据有误token来跳转到，token从redux中获取到。
在登录页面SignForm.tsx挂载到页面上时，会先判断是否登录（有无token），已经登录则跳转到首页（nav('/')），点击登录。
获取到token，跳转到首页。

1、输入想要旅游的地方等词，就可以点击搜索来查询。
2、使用到的组件：<Input.Search>
3、逻辑：携带搜索内容跳转到搜索页面，SearchPage.tsx，在SearchPage.tsx页面中：
使用useEffect来在该页面刚挂载上去以及在搜索词有变化重新搜索时发送请求获取搜索内容。
在点击分页器时传递{nextPage, pageSize, keywords}
发送异步action来获取搜索内容。搜索到的数据通过react-tooltik来保存

1、首页挂载到页面上就开始获取分发action来获取旅游路线
2、该部分由组件<ProductCollection/>
3、逻辑：在HomePage.tsx通过react-redux来获取到redux中请求到的旅游路线productList，渲染到页面上。
点击某一条路线即可进入路线详情来查看。（携带该路线的id跳转（nav(`detail/${props.id}`)）到详情页面DetailPage.tsx）