React旅游网

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

购物车数据以及获取数据都保存在font color=\"#f70505\

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

注销

登录状态

redux：全局切换网站的语言，使用i18n：根据redux中的数据，切换整个首页中的内容的语言形式。中文或英文的语言包保存在json文件中。具体操如笔记中所写。

使用的是redux来获取语言状态的。具体操作如下：1.创建数据中心store（要导入reducer）2.创建reducer来修改数据3.在Header组件中获取store中的语言相关数据。根据获取到的language来判断显示哪种语言。4.在每次点击切换语言的时候还要再次分你发action来修改reducer中的语言数据。（需要订阅与推送subscribe）（以上工作做完后出现的效果就是切换语言你的按钮显示中文或英文，显示添加新语言。）

切换成中文或者英文

切换语言

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

注册

登录

搜索

SearchPage.tsx{Filter.tsx和SearchProductList.tsx}

逻辑：1.使用钩子useParams获取到路由中的params参数（路线的id）2.路线详情数据通过redux-tooltik来保存，通过useSelector来获取state数据。3.在DetailPage.tsx挂载到页面上后就分发异步action（slice中）来获取详情内容。（只在挂载的时候useEffect第二个参数为空）4.点击加入购物车，先判断有没有登录（从token判断），没登录则提示登录，登陆了则分发添加到购物车的action（此action也保存咋redux-tooltik中）

路线详情DetailPage.tsx页面

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

  旅游路线部分——组件<ProductCollection/>（数据是请求网络得来，通过react-redux来保存，分发异步action）

未登录状态

登录状态与未登录状态的显示不同之处：1、未登录：注册和登录。登录：购物车和注销2、登录后显示用户名，未登录时没有

在入口App.tsx中就分发异步action来获取购物车数据

首页HomePage中的旅游推荐列表中的数据全部来自接口返回，通过react-redux来获取，并且是在action中异步获取（通过redux-thunk）

React旅游网      首页HomePage.tsx